Rendering шаблон нокаута с JQuery после загрузки страницы

Question

Я строю нокаута \ JQuery плагин, который создает свой собственный пользовательский интерфейс, когда вызывается, например, так:

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

И в ЯШ:

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/

Bascially Мне интересно, нужно ли мне использовать другой подход здесь, или если есть способ, я могу «разобрать» дом, чтобы обновить знания нокаутов о шаблонах?

Заранее благодарен!

Answer 1

Вы можете переопределить исходный движок шаблона. Вы можете либо переопределить источник шаблона по умолчанию, либо написать привязку настраиваемого шаблона, и только переопределить источник шаблона для этой привязки.

Чтобы установить двигатель шаблона по умолчанию вы можете оформить этот плагин, который я сделал

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

Чтобы overide источник шаблона из пользовательского шаблона bindng вы можете сделать

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