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不是我的麪包和黃油。
真棒!謝謝。新的它一定是簡單的。 –