Question

我试图在关闭按钮上实现一个复选框，我正在使用它作为示例https://jsfiddle.net/meno/MBLP9/但由于某种原因，按钮根本不显示。以下是代码在我的js文件中的样子。

self.on = ko.observable(true);

(function($) {
    ko.bindingHandlers.bootstrapSwitchOn = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            $elem = $(element);
            $(element).bootstrapSwitch();
            $(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('state');
            var vmStatus = ko.utils.unwrapObservable(valueAccessor());
            if (vStatus != vmStatus) {
                $(element).bootstrapSwitch('setState', vmStatus);
            }
        }
    };
})(jQuery);

在我的html文件中

<p class="pushBasket">  
   <span data-bind="text: on() ? 'on' : 'off'"></span>
   <span class="pullBasketRight"><input type="checkbox"  data-bind="bootstrapSwitchOn: on"/></span>
</p>

在我的html文件中，这个＆lt; p>标签位于foreach数据绑定中，因此它也可能导致按钮无法显示。

这是整个HTML代码 http://pastebin.com/csWRfgS8

Answer 1

看起来不错

只需使用$root.on并删除<span data-bind="text: on() ? 'on' : 'off'"></span>

即可

这应该有希望。

On Off Button淘汰赛js

1 个答案: