Knockout检查绑定

时间:2014-06-24 18:35:50

标签: jquery checkbox knockout.js custom-binding

所以我试图使用自定义的敲除复选框绑定来触发表单中某些div的可见性。我很难搞清楚它为什么不能正常工作。我已经把它设置为初始值设置的点,但它不会重新更新。我的问题是我似乎无法正确绑定复选框。

我有一个小提琴帮助这更有意义。加载时,它会设置正确的值,但随后的点击不会做任何事情。

我很难过,我已经看了太久了。

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, 杰弗里

1 个答案:

答案 0 :(得分:2)

您的代码中有两件事情在下面 -

  1. 在HTML中使用'checked'绑定而不是'value'绑定,因为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代码中删除已检查的更新绑定。

    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);