jquery - data - knockoutjs variables

Jquery knockout: renderizar la plantilla en la memoria

Question

Tengo una plantilla knockout:

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

¿Es posible generar el resultado de la plantilla y guardarla en la memoria enviando el objeto para rellenar la plantilla?

Algo como:

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

Answer 1

Sí, es posible aplicar enlaces a nodos desanexados al DOM. Simplemente use la función muy útil ko.applyBindingsToNode para lograr el resultado deseado.

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

Eche un vistazo a este pequeño ejemplo: http://jsfiddle.net/6s4gq/

Actualizar:

Originalmente era el método ko.renderTemplate pero hay un método incorporado en Knockout con el mismo nombre. ko.renderTemplate podría dejar de funcionar su aplicación, especialmente si está utilizando el enlace de template . ¡Ten cuidado!

Answer 2

La respuesta de f_martinez está muy cerca de lo que necesitaba, solo tenía que especificar el motor de plantillas para que funcione. Mi función:

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