使用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" />

见小提琴