接线Bootstrap-switch to knockout observable

Question

我正在看这个例子http://jsfiddle.net/meno/MBLP9/,用于连接bootstrap按钮的on change事件.我无法跟踪如何将其与另一个淘汰赛观察结果联系起来.

我有一个可观察的

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

其中有一个默认值加载,我试图将其连接到交换机.我也不理解小提琴中的语法

他们如何为观察者定义一个:而不是一个=？当我尝试这个Javascript时会抛出语法错误.

最后我想以取代on与IsAggregate

我的viewmodel和绑定

//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);
        }
    }
};

Answer 2

在小提琴代码中,他为引导开关创建了一个绑定处理程序,在开关完成时更新了敲除:在init函数中

init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var $elem = $(element);
        $elem.bootstrapSwitch();
        $elem.bootstrapSwitch('setState', ko.utils.unwrapObservable(valueAccessor())); // Set intial state
        $elem.on('switch-change', function (e, data) {
            valueAccessor()(data.value);
        }); // Update the model when changed.
    },

他获得了敲门属性绑定到的控制权并使用jquery来处理器以在'切换 - 更改'时更新敲除属性

如果有更新并且新值不是当前值,则更新淘汰赛

update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var vStatus = $(element).bootstrapSwitch('state');
    var vmStatus = ko.utils.unwrapObservable(valueAccessor());
    if (vStatus != vmStatus) {
        $(element).bootstrapSwitch('setState', vmStatus);
    }
}

有关自定义绑定的更多参考,请访问:http: //knockoutjs.com/documentation/custom-bindings.html

对于":"问题,在您的代码中,您将模型定义为函数,因此我们使用符号"="来定义其属性,而在小提琴代码中,他使用对象,因此我们使用":"来定义其属性