Question

以下链接显示了淘汰赛的默认模板模式和双向绑定。

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

但我想使用jsrender渲染模板＆＃34;渲染＆＃34;方法。当我这样做时，数据绑定有效但不是双向绑定

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

还有其他方法可以使用jsrender进行双向绑定工作＆＃34; render＆＃34;方法

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)

在此处运行：https://jsfiddle.net/BorisMoore/nbyyx08y/

使用jsrender在knockout中呈现的模板的双向绑定

2 个答案: