Jquery knockout: Render template in-memory

问题:

I have a knockout template:

<script id="draggableHelper" type="text/x-jquery-tmpl">
    <div class="draggableHelper">
        <span data-bind="text: Name"></span>
    </div>
</script>

Is possible to generate the result of the template, and save it into memory, by sending the object to populate the template?

Something like:

var result = ko.renderTemplate($("#draggableHelper").html(), { Name: "Test" });

回答1:

Yes it's possible to apply bindings to nodes unattached to the DOM. Just use very useful function ko.applyBindingsToNode to achieve the desired result.

ko.renderTemplateX = function(name, data){
    // create temporary container for rendered html
    var temp = $("<div>");
    // apply "template" binding to div with specified data
    ko.applyBindingsToNode(temp[0], { template: { name: name, data: data } });
    // save inner html of temporary div
    var html = temp.html();
    // cleanup temporary node and return the result
    temp.remove();
    return html;
};

Take a look at this small example: http://jsfiddle.net/6s4gq/

Update:

Originally it was ko.renderTemplate method but there is built-in method in Knockout with the same name. Overriding ko.renderTemplate could stop working your application, especially if you're using template binding. Be careful!

回答2:

f_martinez's answer is really close to what I needed, I just had to specify the template engine to make it work. My function:

var renderTemplate = function (name, data) {
    // create temporary container for rendered html
    var temp = $("<div>");

    // apply "template" binding to div with specified data
    var options = {
        template: {
            name: name,
            data: data,
            templateEngine: new ko.nativeTemplateEngine()
        }
    };

    ko.applyBindingsToNode(temp[0], options);

    // save inner html of temporary div
    var html = temp.html();

    // cleanup temporary node and return the result
    temp.remove();

    return html;
};