0
我对this fiddle中显示的模式对话框中显示的功能感兴趣。如何更新此版本以使用最新版本的bootstrap?
淘汰赛结合是:
/* Custom binding for making modals */
ko.bindingHandlers.bootstrapModal = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var props = valueAccessor(),
vm = bindingContext.createChildContext(viewModel);
ko.utils.extend(vm, props);
vm.close = function() {
vm.show(false);
vm.onClose();
};
vm.action = function() {
vm.onAction();
}
ko.utils.toggleDomNodeCssClass(element, "modal hide fade", true);
ko.renderTemplate("myModal", vm, null, element);
var showHide = ko.computed(function() {
$(element).modal(vm.show() ? 'show' : 'hide');
});
return {
controlsDescendantBindings: true
};
}
}
和视图模型是:
var viewModel = {};
/* Settings for the bootstrapModal binding...
NOTE you could also set these up in an object literal within the data-bind */
viewModel.modal = {
header: ko.observable("This is a modal"),
body: ko.observable("Lorem ipsum."),
closeLabel: "Close",
primaryLabel: "Do Something",
show: ko.observable(false), /* Set to true to show initially */
onClose: function() {
viewModel.onModalClose();
},
onAction: function() {
viewModel.onModalAction();
}
}
viewModel.showModal = function() {
viewModel.modal.show(true);
}
viewModel.onModalClose = function() {
alert("CLOSE!");
}
viewModel.onModalAction = function() {
alert("ACTION!");
}
ko.applyBindings(viewModel);
我已经创建了一个叉here其是相同的,但我刚刚更新了引导程序和敲除文库是最新的版本,但是当我运行它时,我得到一个灰色的'模态'背景,但我没有看到对话框。
我试着更新模板标记来匹配引导程序网站上给出的模板标记,但这并没有什么区别。
什么改变了,破坏了代码?我怎么去调试这个问题呢,JS不是我的面包和黄油。
真棒!谢谢。新的它一定是简单的。 –