如何通过双击敲除来编辑多选元素中的项目

Question

我有一个包含项目的列表，我只想通过双击或类似操作编辑 selected 项目。是否可以通过双击属性而不是索引（如名称）来编辑多个 select 列表中的 selected 项目？如何实现以下dblclick编辑事件功能：

<select multiple="multiple" height="5" 
     data-bind=" options: ItemsInDB, 
                 optionsText: 'Name', 
                 selectedOptions: selectedItems, 
                 event: { dblclick: editItem } "></select>

Answer 1

这是可行的，但由于 options 绑定不提供对点击处理程序中当前项目的任何轻松访问（据我所知），您需要一些 post 选项元素的处理，以便您可以将它们的索引保存在数据属性中的原始数组中，以便您知道以后要编辑哪个项目。您可以使用 optionsAfterRender 回调。

<select multiple="multiple" height="5" 
     data-bind=" options: ItemsInDB, 
                 optionsText: 'Name', 
                 selectedOptions: selectedItems, 
                 event: { dblclick: editItem },
                 optionsAfterRender: setOptionData">
</select>

它提供了选项元素及其绑定的数据项，因此您可以这样做：

vm.setOptionData = function (option, item) {
    option.dataset.itemIndex = vm.ItemsInDB.indexOf(item);
}

然后在点击处理程序中，您可以再次抓取索引并编辑项目：

vm.editItem = function(data, event) {
    vm.isEditing(!vm.isEditing());
    vm.editingItem(vm.ItemsInDB()[event.target.dataset.itemIndex]);
}

Fiddle: https://jsfiddle.net/thebluenile/vpu2d1c4/

如何通过双击敲除来编辑多选元素中的项目

how to edit an item in multiselect element by double click in knockout

javascript

edit

multi-select

knockout.js