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

Question

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

中的复选框

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

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

这是一个fiddle：

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

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

Answer 1

由于您引入了一个自定义插件，它会将您的本机复选框转换为更复杂的结构，因此内置 checked 绑定处理程序不再能够检测到更改，因为它本来可以工作使用原生 <input type="checkbox" /> 元素的 this.checked（现已隐藏）。

因此，您需要一个插件感知能力更强的处理程序，它能够在自定义复选框发生变化时更新视图模型，并在模型更改时更新插件。

下面的 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

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

Custom Styled Checkbox with KnockoutJS does not respond to data-bind 'checked'

javascript

checkbox

jquery

knockout.js