Zwei-Wege-Bindung für Vorlage gerendert in Knockout mit Jsrender

Question

Der folgende Link zeigt Standard-Template-Modus von Knockout und Zwei-Wege-Bindung funktioniert darin.

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

Aber ich möchte Vorlage machen mit jsrender „machen“ -Methode. Wenn ich so tue, verbindliche Daten funktionieren, aber nicht Zweiweg-

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

Gibt es eine andere Art und Weise Zweiweg Bindung Arbeit mit jsrender „render“ Verfahren verbindlich zu machen?

Answer 1

Sie können benutzerdefinierte Bindung Handler erstellen:

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

Ich habe Ihre fiddle aktualisiert.

Answer 2

Sie könnten JsViews verwenden - die JsRender integriert und vollständige MVVM bietet. Siehe http://www.jsviews.com/#jsvapps.

Hier wird Ihr Beispiel mit 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> 

und

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

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

hier Laufen: https://jsfiddle.net/BorisMoore/nbyyx08y/