Question

我对this fiddle中显示的用于显示模式对话框的功能感兴趣。

敲除绑定是：

/* 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，但我刚刚将bootstrap和knockout库更新为最新版本，但是当我运行它时，我会得到一个灰色的＆＃39;模态＆＃39;背景但我没有看到对话框。

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

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

Answer 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/

如何更新它以使用最新版本的bootstrap？

1 个答案: