How do I update this to use the latest version of

问题:

I am interested in the functionality demonstrated in this fiddle for displaying a modal dialog.

the knockout binding is:

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

and the view model is:

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

I have created a fork here which is identical but I have just updated the bootstrap and knockout libraries to be the latest versions, but when I run it I get a greyed out 'modal' background but I don't see the dialog.

I've tried updating the template markup to match that given on the bootstrap website, but that hasn't made any difference.

What has changed and has broken the code? And how could I go about debugging the issue, JS is not my bread and butter.

回答1:

So there a couple thing wrongs that fix the problem here. First off you have to add a little bit more to the mark up of the actual modal. So add this mark up:

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

Those were some additions in bootstrap 3 and also hide was removed the modal mark up as well so this section:

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

becomes

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

Here is a working fiddle:

http://jsfiddle.net/YT3c5/