使用 jsrender 在淘汰赛中呈现的模板的两种方式绑定答案

【问题标题】：Two way binding for template rendered in knockout using jsrender使用 jsrender 在淘汰赛中呈现的模板的两种方式绑定
【发布时间】：2016-05-26 06:01:30
【问题描述】：

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

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

但我想使用 jsrender“渲染”方法渲染模板。当我这样做时，数据绑定有效，但双向绑定无效

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

有没有其他方法可以使用 jsrender "render" 方法进行双向绑定？

【问题讨论】：

标签： knockout.js jsrender jsviews

【解决方案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。

【讨论】：

【解决方案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/

【讨论】：