2014-03-12 144 views
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不是我的面包和黄油。

回答

1

所以这里有一些错误修正了问题。首先,您必须添加更多一点到实际模态的标记。因此,添加此标记:

<div class="modal-dialog"> 
    <div class="modal-content"> 

这些都是在引导3的一些补充,也hide去除模式标记以及因此本节:

ko.utils.toggleDomNodeCssClass(element, "modal hide fade", true);

成为

ko.utils.toggleDomNodeCssClass(element, "modal fade", true); 

这里是工作提琴:

http://jsfiddle.net/YT3c5/

+0

真棒!谢谢。新的它一定是简单的。 –