Двусторонняя привязка для шаблона, созданного в нокаут с использованием jsrender

Question

Следующая ссылка показывает режим шаблона по умолчанию для нокаута и двухсторонней привязки.

"http://jsfiddle.net/5wZQ2/136/" 

Но я хочу визуализировать шаблон с использованием метода «рендеринга» jsrender. Когда я делаю так, привязка данных работает, но не двухстороннее связывание

"http://jsfiddle.net/5wZQ2/137/" 

Есть ли другой способ сделать два способа связывания работу с jsrender методом «визуализации»?

Answer 1

Вы можете создать пользовательские связывания обработчика:

ko.bindingHandlers.jsrender = { 
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) { 
    var values = valueAccessor(); 
    var childBindingContext = bindingContext.createChildContext(values.data); 
    $(element).html($(values.template).render()); 
    ko.applyBindingsToDescendants(childBindingContext, element); 
    return { controlsDescendantBindings: true }; 
    } 
} 

Я обновил свой fiddle.

Answer 2

Возможно, вы можете использовать JsViews - который объединяет JsRender и предоставляет полный MVVM. См. http://www.jsviews.com/#jsvapps.

Вот ваш пример использования JsViews:

<script type="text/html" id="text"> 
    {^{if ~root.editable}} 
    <input type="text" data-link="name" /> 
    <input type="checkbox" data-link="verified" /> 
    {{else}} 
    <span data-link="name"></span> 
    {{/if}} 
</script> 

<label><input type="checkbox" data-link="editable" /> Editable</label> 

<p>Name: <input data-link="data2.name" /></p> 
<p>Verified: <input type="checkbox" data-link="data2.verified" /></p> 
//Template 
<p>Name2: <span data-link="{for data2 tmpl='#text'}"></span></p> 

и

var viewModel = { 
    data2: {name: "Brian", verified: true}, 
    editable: true, 
}; 

$.link(true, "body", viewModel) 

Running здесь: https://jsfiddle.net/BorisMoore/nbyyx08y/