我在与durandal一起使用bootstrap-toggle(http://www.bootstraptoggle.com/)时遇到问题。
我想用更大,更好的拨动开关代替普通的复选框,以便移动用户可以更好地访问它们。
所以在durandal中,我在index.html中包含了CSS(没有样本,因为与文档相同),而在main.js中包含了js:
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'bootstrap-toggle': '../lib/bootstrap/js/bootstrap-toggle.min',
'jquery': '../lib/jquery/jquery-1.9.1',
'toastr': '../lib/toastr/toastr.min',
'session': '../app/services/session',
'authentication': '../app/services/authentication',
'utility': '../app/services/utility',
'logger': '../app/services/logger'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'jQuery'
}
}
});
在shell.js中,我加载模块(因为默认情况下未加载引导程序):
define(['plugins/router', 'knockout' ,'session', 'toastr','logger', 'durandal/app','bootstrap','bootstrap-switch']
, function (router, ko, session, toastr, logger, app, btstrps, btstrpsw) {
var showSplash = ko.observable(false);
//...
//routing etc...
阅读文档后,我认为足以将复选框设置为“数据切换”:
<input checked data-toggle="toggle" type="checkbox" data-bind="checked: allCustomers" />
最近几个小时我一直在解决这个问题……也许有人遇到过类似的问题。我不知道require例程是否正确加载了toogle.js-我该如何测试?
最佳答案
您将需要使用基因敲除绑定处理程序包装bootstrapToggle,以在可观察对象和bootstrapToggle小部件之间实现双向绑定。
请查看下面的代码片段以获取工作示例。
ko.bindingHandlers.bootstrapToggle = {
init: function(element, valueAccessor){
var observable = valueAccessor();
$(element).change(function(){ observable($(this).prop('checked')); });
var subscription = observable.subscribe(function(value){
$(element).bootstrapToggle(!!value ? "on" : "off");
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
subscription.dispose()
$(element).bootstrapToggle("destroy");
});
$(element).bootstrapToggle(!!valueAccessor()() ? "on" : "off");
}
}
var vm = {
allCustomers: ko.observable(true)
}
ko.applyBindings(vm);
setTimeout(function(){ vm.allCustomers(false); }, 2000);
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<input data-toggle="toggle" type="checkbox" data-bind="bootstrapToggle: allCustomers" />
<div data-bind="text: allCustomers">/</div>
或者,这是带有相同工作示例的fiddle。
我对更好的bootstrapToggle绑定处理程序的建议持开放态度,该处理程序可以实现双向绑定。