Javascript Durandal和引导开关
我对引导切换()和durandal有问题。 我想用更大更好的切换开关取代普通的复选框,这样移动用户可以更好地访问它们 因此,在durandal中,我将css包含在index.html中(没有示例,因为与docs相同),将js包含在main.js中:Javascript Durandal和引导开关,javascript,css,twitter-bootstrap,toggle,durandal,Javascript,Css,Twitter Bootstrap,Toggle,Durandal,我对引导切换()和durandal有问题。 我想用更大更好的切换开关取代普通的复选框,这样移动用户可以更好地访问它们 因此,在durandal中,我将css包含在index.html中(没有示例,因为与docs相同),将js包含在main.js中: requirejs.config({ paths: { 'text': '../lib/require/text', 'durandal':'../lib/durandal/js', 'plugins' : '../lib/d
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中,我加载模块(因为默认情况下不会加载引导):
在阅读文档后,我认为这足以使复选框“数据切换”:
<input checked data-toggle="toggle" type="checkbox" data-bind="checked: allCustomers" />
过去几个小时我一直在解决这个问题。。。也许有人经历过类似的问题。我不知道require例程是否正确加载了toogle.js-我如何测试它?您需要使用knockoutjs绑定处理程序包装bootstraptogle,以便在您的可观察小部件和bootstraptogle小部件之间启用双向绑定 请查看下面的代码片段,以获得一个有效的示例
ko.bindingHandlers.bootstrapToggle={
init:函数(元素、值访问器){
var可观测=valueAccessor();
$(element).change(function(){observable($(this.prop('checked'));});
var订阅=可观察的订阅(函数(值){
$(元素).bootstrapToggle(!!值?“开”:“关”);
});
ko.utils.domNodeDisposal.addDisposeCallback(元素,函数(){
subscription.dispose()
$(元素).bootstraptogle(“销毁”);
});
$(元素).bootstrapToggle(!!valueAccessor()()?“开”:“关”);
}
}
var vm={
所有客户:可观察(真实)
}
ko.应用绑定(vm);
setTimeout(函数(){vm.allCustomers(false);},2000)代码>
/
正如Anish已经提到的(再次感谢),您需要一个自定义绑定处理程序。为了更好地集成durandal,我想展示我的解决方案:
mybinding.js
define(['knockout', 'jquery'], function (ko, $) {
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");
}
}
});
main.js
define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'toastr'], function (system, app, viewLocator, toastr) {
require(['bootstrap','bootstrap-toggle','mybinding']);
//>>excludeStart("build", true);
system.debug(true);
//>>excludeEnd("build");
app.configurePlugins({
router:true,
bootstrapModal: true
});
app.start()
.then(function() {
toastr.options.positionClass = 'toast-bottom-right';
toastr.options.backgroundpositionClass = 'toast-bottom-right';
viewLocator.useConvention();
app.setRoot('viewmodels/shell','entrance');
});
});
exampleView.html
<!-- some form markup-->
<input data-on="1" data-off="0" data-toggle="toggle" data-size="mini" type="checkbox"
data-bind="attr: { id: name }, bootstrapToggle: selected"/>
谢谢Anish,我通过require('mybinding')实现了它,我在其中定义了自定义绑定……顺便说一句:自定义绑定似乎很有趣;)
<!-- some form markup-->
<input data-on="1" data-off="0" data-toggle="toggle" data-size="mini" type="checkbox"
data-bind="attr: { id: name }, bootstrapToggle: selected"/>