Jquery 淘汰赛：在内存中渲染模板答案

【问题标题】：Jquery knockout: Render template in-memoryJquery 淘汰赛：在内存中渲染模板
【发布时间】：2013-12-09 14:29:20
【问题描述】：

我有一个淘汰赛模板：

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

【问题讨论】：

我对此表示怀疑，因为 Knockout 不是模板引擎。它在任何时候都不会构建某些东西的“HTML 字符串”。你可以 subscribe() 到一个 observable 并从相应的节点获取 innerHTML。
"原生模板是支持 foreach、if、with 和其他控制流绑定的机制。在内部，这些控制流绑定捕获元素中包含的 HTML 标记，并将其用作模板针对任意数据项进行渲染。此功能内置于 Knockout 中，不需要任何外部库" - knockoutjs.com/documentation/template-binding.html

标签： jquery knockout.js knockout-2.0

【解决方案1】：

是的，可以将绑定应用于未附加到 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 方法，但是在 Knockout 中有内置方法同名。覆盖ko.renderTemplate 可能会停止运行您的应用程序，尤其是在您使用template 绑定的情况下。小心！

【讨论】：

警告：ko.renderTemplate 已在淘汰赛中定义。这个邪恶的代码让我连续两天把头撞在墙上，试图找出为什么我所有的“不在内存中”模板都会导致“堆栈空间不足”错误。请改名！
@DaviFiamenghi，我无法表达对您浪费时间的抱歉！我已经更新了我的答案。谢谢！
哈哈谢谢你的吝啬，先生。还有对不起剧情，回答的时候有点生气

【解决方案2】：

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

【讨论】：