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

Question

我正试图用这个漂亮的自举开关替换表中的复选框.

我也使用此链接建议的knockout和绑定处理程序.

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

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

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

有任何想法吗？

Html:

<div>
<input type="checkbox" data-bind="checked: on" />
</div>
<div>
    <span data-bind="text: on() ? 'on' : 'off'"></span>
</div>
<div class="switch switch-large" data-bind="bootstrapSwitchOn: on">
    <input type="checkbox" />
</div>

<p>Why doesn't this work in a table?</p>

<table class="table table-striped table-condensed table-bordered">
    <thead>
    <tr>
        <th>Name</th>
        <th>Old</th>
        <th>Old toggle With CheckBox</th>
        <th>Old toggle With Switch</th>
    </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: Name"></td>
            <td data-bind="text: Old"></td>
            <td>
                <input type="checkbox" data-bind="checked: Old" />
            </td>
            <td>
                <div class="switch switch-large" data-bind="bootstrapSwitchOn: Old">
                    <input type="checkbox" />
                </div>
            </td>
        </tr>
    </tbody>
</table>

绑定处理程序和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, valueAccessor, allBindingsAccessor, 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);

Answer 1

您使用的是较旧版本的 bootstrapSwitch (1.3)，它会自动在具有“.switch”类的元素上执行插件，给人的印象是正在使用自定义绑定。

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

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

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

[更新] - 我认为问题的根本原因是插件在 DOM 就绪时启动自身以及淘汰构建 DOM 之间的竞争条件。

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