在页面加载后用jQuery呈现一个knockout模板

Question

我正在构建一个knockoutjQuery插件，它在调用时创建自己的UI，如下所示:

<input type="text" name="filter" id="filter" />
// renders ui
$("#filter").myPlugin();

常用的jQuery内容。然而，作为行为的一部分，我希望使用淘汰模板。不过，knockout似乎只识别第一次加载时在页面中的模板。

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

<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刷新敲除模板的知识?

提前感谢!

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