twitter-bootstrap - 将 Bootstrap-switch 连接到可观察到的 knockout

Question

我在看这个例子 http://jsfiddle.net/meno/MBLP9/用于连接 Bootstrap 按钮的 on change 事件。我无法理解如何将其与另一个可观察到的 knockout 联系起来。

我有一个可观察的

self.IsAggregate = ko.observable(modeldata.SelectedItem.Aggregate);

它在负载上有一个默认值，我正在尝试将它连接到开关中。我也不懂 fiddle 中的语法

他们如何定义 :对于可观察的而不是 = ?当我尝试此 Javascript 时会引发语法错误。

最终我试图替换 on与 IsAggregate
我的 View 模型和绑定(bind)

//Registering switches
$("[name='toggleCatalog']").bootstrapSwitch();
    $("[name='toggleAggregate']").bootstrapSwitch();
var ViewModel = function(modeldata) {
        var self = this;
        self.on = ko.observable(true),
        self.SelectedCatalog = ko.observable(modeldata.SelectedCatalog);
        self.IsAggregate = ko.observable(modeldata.SelectedItem.Aggregate);
        self.IsEnabled = ko.observable(modeldata.SelectedItem.Enabled);
        self.CatalogConfiguration = ko.observableArray([]);
        self.ColumnDropdown = ko.observableArray([]);
        };

$(document).ready(function () {
        var model = new ViewModel(modeldata);
};

Answer 1

我不确切知道上述哪个版本停止工作。我不得不修改接受的解决方案以使其适合我并想分享:

/**
 * Knockout binding handler for bootstrapSwitch indicating the status
 * of the switch (on/off): https://github.com/nostalgiaz/bootstrap-switch
 */
ko.bindingHandlers.bootstrapSwitchOn = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var $elem = $(element);
        $elem.bootstrapSwitch();
        $elem.bootstrapSwitch('state', ko.utils.unwrapObservable(valueAccessor())); // Set intial state
        $elem.on('switchChange.bootstrapSwitch', function (event, state) {
            valueAccessor()(state);
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var vStatus = $(element).bootstrapSwitch('state');
        var vmStatus = ko.utils.unwrapObservable(valueAccessor());
        if (vStatus != vmStatus) {
            $(element).bootstrapSwitch('state', vmStatus);
        }
    }
};