Knockoutjs bind model to template created with ko.renderTemplate

Question

What I\'m trying to do is create a DOM node, render a template with ko.renderTemplate overwriting the created node and then, in that template both be able to get data from a spe

Answer 1

I have an improved version of https://stackoverflow.com/a/16160300/2630724 to share:

ko.bindingHandlers.modal = {
    init: function(element, valueAccessor, allBindings, vm, context) {
        var modal = valueAccessor();

        //init the modal and make sure that we clear the observable no matter how the modal is closed
        $(element).modal({show: false}).on("hidden.bs.modal", function() {
            if (ko.isWriteableObservable(modal)) {
                modal(null);
            }
        });

        var template_computed = ko.computed({
            read: function() {
                var value = modal();
                return value ? value : {'if': false};
            },
            disposeWhenNodeIsRemoved: element
        });

        //apply the template binding to this element
        return ko.applyBindingsToNode(element, { template: template_computed }, context);
    },
    update: function(element, valueAccessor) {
        var data = ko.utils.unwrapObservable(valueAccessor());
        //show or hide the modal depending on whether the associated data is populated
        $(element).modal(data ? "show" : "hide");
    }
};

All you need in addition to this is one element for the modal

somewhere on your page and then you open a dialog by writing to the currentModal observable and you close the dialog by nulling it: currentModal(null)

I'm using bootstrap 3.0-rc1 knockout 2.3 in there which allows a computed as template name :)

Thanks @rp-niemeyer for posting this!