页面加载后使用 jQuery 渲染敲除模板答案

【问题标题】：Rendering a knockout template with jQuery after page has loaded页面加载后使用 jQuery 渲染敲除模板
【发布时间】：2013-06-10 10:47:51
【问题描述】：

我正在构建一个淘汰赛\jQuery 插件，它在调用时会创建自己的 UI，如下所示：

<input type="text" name="filter" id="filter" />

// renders ui
$("#filter").myPlugin();

常用的 jQuery 东西。但是，作为行为的一部分，我希望使用淘汰模板。虽然敲除似乎只识别第一次加载时页面中的模板。

这里有一个简明的例子来说明问题：

<div id="container">
    <div data-bind="template: { name: 'fieldsTemplate', foreach: FilterRows() }">
    </div>
</div>

还有js：

var fieldstemplate = $('<script>', { type: "text/html", id:"fieldsTemplate" });
var row = $('<ol>').html("<li>row</li>").appendTo(fieldstemplate);

fieldstemplate.insertAfter($("#container"));

var model = { FilterRows: ko.observable(["row"]) };
ko.applyBindings(model);

这会产生以下错误：

Uncaught TypeError: Cannot read property 'length' of null knockout-2.2.1.js:8

我还在这里创建了一个解决问题的 JS 小提琴：http://jsfiddle.net/roysvork/EcFRc/

基本上我想知道我是否需要在这里采取另一种方法，或者是否有一种方法可以“解析” dom 以刷新模板的淘汰赛知识？

提前致谢！

【问题讨论】：

您当然可以使用另一种加载模板的方法，但只想提一下，对于您的原始问题，这实际上与您设置script 元素内容的方式有关。您可能想使用text 来设置内容，例如：jsfiddle.net/rniemeyer/uWbQt。错误不是因为找不到模板，而是因为它认为模板没有内容。希望对您有所帮助。
啊，太棒了，谢谢瑞恩。似乎另一个线程最后有点矫枉过正！至少，这是对模板引擎工作原理的一次有趣的冒险。

标签： jquery jquery-plugins knockout.js knockout-templating

【解决方案1】：

您可以覆盖模板源引擎。您可以覆盖默认模板源，或编写自定义模板绑定并仅覆盖该绑定的模板源。

要设置默认模板引擎，您可以查看我已经完成的这个插件

https://github.com/AndersMalmgren/Knockout.Bootstrap/blob/master/src/Knockout.Bootstrap.js#L27

要从自定义模板绑定中覆盖模板源，您可以这样做

ko.renderTemplate(template, bindingContext.createChildContext(data), engine /* reference your template engine */, element, "replaceChildren");

【讨论】：

我想我跟着...所以你说一个潜在的解决方案是提供一个可以指定为字符串的替代模板源？
是的，一个很基础的字符串模板源码可以在我写的这个插件里找到github.com/AndersMalmgren/Knockout.Combobox/blob/master/src/…
很酷，感谢您的输入...我实际上需要使用 ko.renderTemplateForEach() 但这似乎不接受引擎作为参数，这是您遇到的问题吗？
忽略最后的评论，在查看源代码后我发现我们可以将模板引擎附加到选项。
我正要回答：D