使用KnockoutJS的自定义样式复选框不响应数据绑定'已检查'

Question

我有一个高级复选框,根据初始数据选中或取消选中,然后当用户手动检查或取消选中时,它也会响应.以前对于我更原始的复选框,我真的很喜欢使用此处的复选框.

唯一的问题是它与Knockout无法正常工作.请注意初始化自定义复选框时复选框的响应方式.但是,如果从JavaScript底部删除此代码,它将按预期工作.

// INITIALIZE CHECKBOX
$('#witnessSlider').checkboxpicker();

这是一个小提琴:

http://jsfiddle.net/maxgrr/r23q740u/1/

这也适用于各种其他类型的自定义复选框.

Answer 1

由于您正在引入一个自定义插件,该插件将您的本机复选框转换为更复杂的结构,因此内置checked绑定处理程序不再能够检测到更改,因为它本身适用于this.checked本机<input type="checkbox" />元素(现在已隐藏) ).

因此,您需要一个更易于插件的处理程序,它可以在自定义复选框发生变化时更新视图模型,并在模型更改时更新插件.

以下checkboxpicker处理程序就是这样做的:init只调用一次函数来设置插件,根据当前视图模型状态(值的值wereThereAnyWitnesses)设置其初始状态,并将监听器(change)注册到将来更新的任何未来更改视图模型.

update每次视图模型更改时都会调用该函数,并负责相应地更新自定义复选框状态.

ko.bindingHandlers.checkboxpicker =
{
    init: function(element, valueAccessor){
        var val = valueAccessor();
        $(element).checkboxpicker().prop('checked', val()).change(function() {
            val(this.checked);
        });
    },
    update: function(element, valueAccessor) {
        var val = valueAccessor();
        $(element).prop('checked', val());
    }
};

在你的HTML中:

<input type="checkbox" data-bind="checkboxpicker: wereThereAnyWitnesses" />

见小提琴