JQuery knockout: шаблон рендеринга в памяти

у меня есть шаблон нокаут:

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

можно ли сгенерировать результат шаблона и сохранить его в памяти, отправив объект для заполнения шаблона?

что-то типа:

var result = ko.renderTemplate($("#draggableHelper").html(), { Name: "Test" });
6
jquery knockout-2.0 knockout.js

2 ответов

да, можно применить привязки к узлам, не привязанным к DOM. Просто используйте очень полезную функцию ko.applyBindingsToNode для достижения желаемого результата.

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

взгляните на этот небольшой пример:http://jsfiddle.net/6s4gq/

обновление:

первоначально это был ko.renderTemplate метод, но есть встроенный метод в нокауте с тем же именем. Переопределение ko.renderTemplate может перестать работать приложения, особенно если вы используя template привязка. Будьте осторожны!

14

ответ f_martinez очень близок к тому, что мне нужно, мне просто нужно было указать механизм шаблонов, чтобы он работал. Моя функция:

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