将 Bootstrap-switch 连接到可观察到的淘汰赛答案

【问题标题】：Wiring Bootstrap-switch to knockout observable将 Bootstrap-switch 连接到可观察到的淘汰赛
【发布时间】：2016-09-28 11:39:28
【问题描述】：

我正在查看此示例 http://jsfiddle.net/meno/MBLP9/ 以连接引导按钮的 on change 事件。我无法理解如何将其与另一个可观察到的淘汰赛联系起来。

我有一个可观察的

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

在加载时有一个默认值，我正在尝试将其连接到开关中。我也不懂小提琴中的语法

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

最终我想用IsAggregate 替换on

我的视图模型和绑定

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

【问题讨论】：

标签： twitter-bootstrap knockout.js

【解决方案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);
        }
    }
};

【讨论】：

我现在正在实施，感谢您的工作@Peter！但是，似乎必须再次对此进行新的更改。我在单独的答案中发布了我的最新版本。 .. 但是，没有你，不可能做到。

【解决方案2】：

在小提琴代码中，他为引导开关创建了一个绑定处理程序，该处理程序在开关完成时更新淘汰赛：在初始化函数中

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来放置处理程序以在'switch-change'时更新敲除属性

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

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

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

【讨论】：

我明白了，这更有意义。那么绑定处理程序可以连接到我的可观察对象并由var model = new ViewModel(modeldata); 实例化吗？
我认为这个小提琴 jsfiddle.net/MBLP9/29 将是我所需要的，我能够让更新与函数模型一起使用。
另外，来自 github/nuget 的文件与该小提琴中使用的文件不同。

【解决方案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 对象的一部分传入。但是，除此之外还有其他微小的修改......

【讨论】：

【解决方案4】：

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

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

【讨论】：