带有 KnockoutJS 的自定义样式复选框不响应数据绑定“已选中”

Question

我有一个高级复选框，它根据初始数据被选中或取消选中，然后当用户手动选中或取消选中它时它也会响应。以前对于我更原始的复选框，我真的很喜欢使用来自here 的复选框。

唯一的问题是它不能与 Knockout 一起正常工作。注意初始化自定义复选框时复选框如何不响应。但是，如果您从 JavaScript 底部删除此代码，它会按预期工作。

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

这是一个小提琴：

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

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

Answer 1

由于您引入了一个自定义插件，该插件将您的本机复选框转换为更复杂的结构，因此内置的 checked binding-handler 不再能够检测到更改，因为它本来可以与 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" />

见Fiddle