javascript – 为什么我的BootstrapSwitch无法在使用foreach构建的挖空表中工作

前端之家收集整理的这篇文章主要介绍了javascript – 为什么我的BootstrapSwitch无法在使用foreach构建的挖空表中工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正试图用这个好看的bootstrap switch来替换表格中的复选框.

我也使用淘汰赛和绑定处理程序,如link所示.

但是我无法使绑定处理程序工作,或者在使用每个敲除的表构建的表中可以单击该开关.

我在jsfiddle中复制了这个问题.

我还在学习javascript和淘汰赛,只是无法弄清楚绑定处理程序或交换机出了什么问题.

有任何想法吗?

Html:

Box" data-bind="checked: on" />
Box" />
BoxBox" data-bind="checked: Old" />
            Box" />
                

绑定处理程序和knockout视图

/**
 * 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('setState',ko.utils.unwrapObservable(valueAccessor())); // Set intial state
        $elem.on('switch-change',function (e,data) {
            valueAccessor()(data.value);
        }); // Update the model when changed.
    },update: function (element,viewmodel) {
        var vStatus = $(element).bootstrapSwitch('status');
        var vmStatus = ko.utils.unwrapObservable(valueAccessor());
        if (vStatus != vmStatus) {
            $(element).bootstrapSwitch('setState',vmStatus);
        }
    }
};

var vm = {
    on: ko.observable(true),items: ko.observableArray([
        {Name: "Dave",Old: ko.observable(false)},{Name: "Richard",Old: ko.observable(true)},{Name: "John",Old: ko.observable(false)}
    ])    
}

ko.applyBindings(vm);
最佳答案
您使用的是较旧版本的bootstrapSwitch(1.3),它会自动在带有’.switch’类的元素上执行插件,从而给出了使用自定义绑定的印象.

我已将插件更新到最新版本,并在init绑定方法中启动插件,例如:

ko.bindingHandlers.bootstrapSwitchOn = {
    init: function (element,viewmodel) {
        $elem = $(element);
        $(element).bootstrapSwitch(); // initiate the plugin before setting options
        $(element).bootstrapSwitch('setState',ko.utils.unwrapObservable(valueAccessor())); // Set intial state
        // .. etc
    }
}

升级最新版本的插件似乎可以解决问题:http://jsfiddle.net/badsyntax/59wnW/5/

[更新] – 我认为问题的根本原因是在DOM准备好的插件启动之间以及在构建DOM之间进行淘汰之间的竞争条件.

此示例适用于旧版本的bootstrapSwitch,只要您在绑定viewmodel后启动插件http://jsfiddle.net/badsyntax/59wnW/6/

原文链接:https://www.f2er.com/js/429811.html

猜你在找的JavaScript相关文章