Question

我正在查看此示例http://jsfiddle.net/meno/MBLP9/以连接引导按钮的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来处理器以更新敲除属性时切换＆＃39;

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

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

对于＆＃34;：＆＃34;问题，在您的代码中，您将模型定义为函数，因此我们使用符号＆＃34; =＆＃34;定义其属性而在小提琴代码中，他使用对象，所以我们使用＆＃34;：＆＃34;定义其属性

Answer 3

根据@Peter的回答，再次改进......

/**
* 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) {
        $elem = $(element);
        $(element).bootstrapSwitch({
            onSwitchChange: function (event, state) {
                event.preventDefault();
                valueAccessor()(state);// Update the model when changed.
                return;
            }
        });
        $(element).bootstrapSwitch('state', ko.utils.unwrapObservable(valueAccessor())); // Set intial 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);
        }
    }
};

最值得注意的是，我将onSwitchChange函数作为options对象的一部分传入。但是，还有其他微小的编辑...

Answer 4

bootstrap-switch github页面中还提到了一个knockout处理程序。似乎以更干净的方式处理引导开关选项和模板绑定

ko.bindingHandlers.bootstrapSwitch = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize bootstrapSwitch
        $(element).bootstrapSwitch();

        // setting initial value
        $(element).bootstrapSwitch('state', valueAccessor()());

        //handle the field changing
    $(element).on('switchChange.bootstrapSwitch', function (event, state) {
            var observable = valueAccessor();
            observable(state);            
        });

        // Adding component options
        var options = allBindingsAccessor().bootstrapSwitchOptions || {};
        for (var property in options) {
            $(element).bootstrapSwitch(property, ko.utils.unwrapObservable(options[property]));
        }

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).bootstrapSwitch("destroy");
        });

    },
    //update the control when the view model changes
    update: function (element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        // Adding component options
        var options = allBindingsAccessor().bootstrapSwitchOptions || {};
        for (var property in options) {
            $(element).bootstrapSwitch(property, ko.utils.unwrapObservable(options[property]));
        }

        $(element).bootstrapSwitch("state", value);        
    }
};

礼貌： knockout-bootstrap-switch

接线Bootstrap-switch to knockout observable

4 个答案: