2014-03-12 143 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

真棒!謝謝。新的它一定是簡單的。 –