knockout.js 检查绑定不适用于 bootstrap data-toggle="toggle"

Question

我正在使用 bootstrap 切换这里是 html 代码

<input data-bind="checked: Active" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="primary" data-offstyle="danger" type="checkbox">

<button type="button" class="btn btn-primary" data-bind="click: AddEditSubCategory">Save</button>

已检查的绑定无效。 这是 knockout.js 代码

var SubCategoryViewModel = {
Active: ko.observable(),
AddEditSubCategory: function () {
        console.log(SubCategoryViewModel.Active());
}

我在控制台中得到一个未定义的值

$(document).ready(function () {
ko.applyBindings(SubCategoryViewModel, document.getElementById("categoryMain"));}

谁能告诉我如何解决这个问题。

复选框的设计如下图所示，我正在使用这个库http://www.bootstraptoggle.com/。如果我不使用 data-toggle="toggle" 绑定工作正常。

Answer 1

如 Jason Spake 所述，您将需要自定义绑定。这是一个工作 fiddle。 http://jsfiddle.net/MBLP9/358/

这里是绑定

ko.bindingHandlers.bootstrapToggleOn = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        $elem = $(element);
        $(element).bootstrapToggle({
        on: 'Yes',
        off: 'No',
        onstyle: 'primary',
        offstyle: 'danger'
        });
        if (ko.utils.unwrapObservable(valueAccessor())){
          $elem.bootstrapToggle('on')
        }else{
           $elem.bootstrapToggle('off')
        }

      $elem.change(function() {
       if ($(this).prop('checked')){
          valueAccessor()(true);
       }else{
           valueAccessor()(false);
       }
    })

    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var vStatus = $(element).prop('checked');
        var vmStatus = ko.utils.unwrapObservable(valueAccessor());
        if (vStatus != vmStatus) {
            $(element).bootstrapToggle('toggle')
        }
    }
};