时间戳

首页 > 解决方案 > 如何通过在淘汰赛中双击来编辑多选元素中的项目

javascript - 如何通过在淘汰赛中双击来编辑多选元素中的项目

问题描述

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

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

标签： javascriptknockout.jseditmulti-select

解决方案

这是可行的，但是由于options绑定不提供对单击处理程序中当前项目的任何轻松访问（据我所知），因此您需要对选项元素进行一些后期处理，以便您可以例如保存他们的数据属性中原始数组中的索引，以便您知道以后要编辑哪个项目。您可以使用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]);
}

小提琴：https ://jsfiddle.net/thebluenile/vpu2d1c4/

推荐阅读