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

This is a little bit different than your specific question, but here is an alternative way to work with a bootstrap modal.

You can use a custom binding that wraps both bootstrap's modal and the template binding.

The binding might look like:

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, backdrop: 'static' }).on("hidden.bs.modal", function() {
            if (ko.isWriteableObservable(modal)) {
                modal(null);
            }
        });

        //template's name field can accept a function to return the name dynamically
        var templateName = function() {
            var value = modal();
            return value && value.name;
        };

        //a computed to wrap the current modal data
        var templateData = ko.computed(function() {
            var value = modal();
            return value && value.data;
        });

        //apply the template binding to this element
        ko.applyBindingsToNode(element, { template: { 'if': modal, name: templateName, data: templateData } }, context);

        //tell KO that we will handle binding the children (via the template binding)
        return { controlsDescendantBindings: true };
    },
    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");
    }
};

Now, you would bind a single modal on your page like:

currentModal would be an observable that you populate with an object that contains a name (the template name) and data.

The way that this works is that if currentModal is populated, then the modal is displayed using the current template and data. If currentModal is null, then the modal is closed.

Here is a sample for how this would work: http://jsfiddle.net/rniemeyer/NJtu7/