我正试图用这个好看的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/
