如何更新它以使用最新版本的引导程序？答案

【问题标题】：How do I update this to use the latest version of bootstrap?如何更新它以使用最新版本的引导程序？
【发布时间】：2014-04-17 09:33:18
【问题描述】：

我对@987654321@ 中演示的用于显示模式对话框的功能感兴趣。

淘汰赛绑定是：

/* 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);

我创建了一个 fork here，它是相同的，但我刚刚将引导程序和淘汰赛库更新为最新版本，但是当我运行它时，我得到一个灰色的“模态”背景，但我没有看到对话框。

我已尝试更新模板标记以匹配引导网站上给出的标记，但这并没有任何区别。

发生了什么变化并破坏了代码？我怎么能去调试这个问题，JS不是我的面包和黄油。

【问题讨论】：

标签： twitter-bootstrap knockout.js twitter-bootstrap-3

【解决方案1】：

所以这里有一些错误可以解决问题。首先，您必须在实际模态的标记中添加更多内容。所以添加这个标记：

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

这些是 bootstrap 3 中的一些新增内容，hide 也被删除了模态标记，因此本节：

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

变成

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

这是一个有效的小提琴：

http://jsfiddle.net/YT3c5/

【讨论】：

太棒了！谢谢。新它一定很简单。