jsrenderを使用してノックアウトでレンダリングされたテンプレートの双方向バインディング

Question

次のリンクは、ノックアウトのデフォルトのテンプレートモードとその中の双方向バインディングの動作を示しています。

しかし、私はjsrender "レンダリング"メソッドを使用してテンプレートをレンダリングしたいと思います。私はそうやっているときに、データが作品をバインディングではなく、双方向jsrender「レンダリング」方法の2つの方法で結合作業を行うための他の方法はあり

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

結合しますか？

Answer 1

あなたはカスタムバインディングのハンドラを作成することができます：私はあなたのfiddleを更新した

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

を。

Answer 2

JsRenderを統合し、完全なMVVMを提供するJsViewsの使用を検討するとよいでしょう。 http://www.jsviews.com/#jsvappsを参照してください。

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

：https://jsfiddle.net/BorisMoore/nbyyx08y/

ここ

はJsViewsを使用してあなたの例であります