jquery - knockout 检查装订

Question

因此，我尝试使用自定义 knockout 复选框绑定(bind)来触发表单中某些 div 的可见性。我很难弄清楚为什么它不能正常工作。我已经达到了设置初始值的程度，但随后它不会重新更新。我的问题是我似乎无法正确绑定(bind)复选框。

我有一个 fiddle 可以帮助这更有意义。当它加载时，它会设置正确的值，但随后的单击不会执行任何操作。

我被难住了，我已经看了太久了。

var data = true;

ko.bindingHandlers.aipchecked = {
    update: function(element, valueAccessor) {
        var options = valueAccessor();
        alert(options.value());
        if (options.value()) {
                    $(options.checked).slideDown('fast', function () { });
                    $(options.unchecked).slideUp('fast', function () { });
        } else {
                    $(options.checked).slideUp('fast', function () { });
                    $(options.unchecked).slideDown('fast', function () { });
        }
        options.value(options.value())
        //ko.bindingHandlers.checked.update(element, options.value);
      } 
};

var viewModel = {
    control:[
        {   
            checked: '#one',
            unchecked: '',
            value: ko.observable(true)
       }    
    ]
};
viewModel.control[0].value(data);
ko.applyBindings(viewModel);

HTML

    <div data-bind="foreach: control">
<input type="checkbox" data-bind="aipchecked:{value: value,checked:checked,unchecked:unchecked}" />
    <label data-bind="text: value"></label>
</div>
    <div id="one">testing</div>

http://jsfiddle.net/gdefilippi/SuAYR/8/

V/R，杰弗里

Answer 1

代码中出现的两件事如下 -

1. 在 HTML 中使用“checked”绑定(bind)而不是“value”绑定(bind)，因为 check 事件会更改复选框的状态。

   <div data-bind="foreach: control">
       <input type="checkbox" data-bind="checked:value,aipchecked:{value: value,checked:checked,unchecked:unchecked}" />
       <label data-bind="text: value"></label>
   </div>
   <div id="one">testing</div>
   

2. 从 JS 代码中删除选中的更新绑定(bind)。

   var data = true;
   
   ko.bindingHandlers.aipchecked = {
       update: function(element, valueAccessor) {
       var options = valueAccessor();
       alert(options.value());
       if (options.value()) {
               $(options.checked).slideDown('fast', function () { });
               $(options.unchecked).slideUp('fast', function () { });
       } else {
               $(options.checked).slideUp('fast', function () { });
               $(options.unchecked).slideDown('fast', function () { });
       }
       //ko.bindingHandlers.checked.update(element, options.value);
       } 
   };
   
   var viewModel = {
       control:[
           {   
               checked: '#one',
               unchecked: '',
               value: ko.observable(true)
           }    
       ]
   };
   viewModel.control[0].value(data);
   ko.applyBindings(viewModel);