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

見小提琴