Knockout.js中data-bind点击事件实现单行if选中取消功能问询

我来帮你实现点击切换选中/取消的功能，用Knockout的单行逻辑完全可以搞定！

修改你的HTML点击绑定 #

你只需要把原来的click绑定里的push操作，换成一个三元表达式（这就是你要的单行"if"逻辑），判断当前字段的FieldCode是否已经在selectedToListRule数组里：

<div 
    data-bind="
        text: Fields.FieldDescription, 
        click: function() { 
            $root.selectedToListRule.indexOf(Fields.FieldCode()) === -1 
                ? $root.selectedToListRule.push(Fields.FieldCode()) 
                : $root.selectedToListRule.remove(Fields.FieldCode());
        },
        css: { 'selected-item': $root.selectedToListRule.indexOf(Fields.FieldCode()) !== -1 }
    "
></div>

解释一下逻辑 #

1. 判断是否已选中：用$root.selectedToListRule.indexOf(Fields.FieldCode()) === -1检查当前字段的编码是否不在选中数组里
2. 三元表达式执行操作：
   • 如果不在（等于-1），就push进数组（选中）
   • 如果已经存在，就remove掉（取消选中）
3. 额外优化：选中样式同步：我加了css绑定，当字段被选中时自动给div加上selected-item类，你可以在CSS里定义这个类的样式（比如背景色），替代原来的onmousedown硬编码，这样样式会和选中状态自动同步：

   .selected-item {
       background-color: #4BA6FF;
   }
   

和你现有JS代码的兼容性 #

这个修改完全兼容你现有的RemovefieldCodeRule函数，因为它只是修改了选中数组的维护逻辑——现在数组里只会保留当前选中的字段，取消选中时会自动移除，后续的移除和排序逻辑都能正常工作。

内容的提问来源于stack exchange，提问作者nhoyti