JSRender子模板中data-link无法绑定数据问题求助

问题根源是你只用了JSRender的纯静态渲染能力，但data-link是JSViews的双向绑定特性，必须启用JSViews的绑定机制才能生效。

关键修正点： #

1. 确保页面引入了jQuery和JSViews库（JSRender是JSViews的子集，双向绑定依赖完整的JSViews）
2. 不要用$.render()生成静态HTML，改用$.link()方法把模板和数据绑定到DOM元素上，激活data-link的双向绑定逻辑
3. 模板遍历数据时，使用JSViews的绑定语法{^{for ...}}（带^符号的双大括号），而非JSRender的普通遍历语法

完整可运行代码示例： #

<!-- 引入本地的jQuery和JSViews文件 -->
<script src="jquery.min.js"></script>
<script src="jsviews.min.js"></script>

<!-- 子模板 -->
<script id="columnTemplate" type="text/x-jsrender">
  <div>
    <em>{{:name}}</em>
    <input data-link="name" />
  </div>
</script>

<script id="rowTemplate" type="text/x-jsrender">
  <span>
    <b>{{:name}}</b>
    <input data-link="name" />
  </span>
</script>

<!-- 主模板（原Demo外层模板，你可能遗漏了这部分） -->
<script id="movieTemplate" type="text/x-jsrender">
  <h3>{{:title}}</h3>
  {^{for languages tmpl=tmpl/}} <!-- 绑定模式的for循环语法 -->
</script>

<!-- 渲染容器 -->
<div id="moviesContainer"></div>

<script>
var movies = [
  {
    title: "Meet Joe Black",
    tmpl: "columnTemplate",
    languages: [
      {name: "English"},
      {name: "French"}
    ]
  },
  {
    title: "Eyes Wide Shut",
    tmpl: "rowTemplate",
    languages: [
      {name: "French"},
      {name: "Esperanto"},
      {name: "Spanish"}
    ]
  }
];

// 核心：用JSViews的link方法绑定数据，而非render
$.link("#moviesContainer", movies, {
  template: "#movieTemplate"
});
</script>

原因说明： #

你之前大概率用了$.render()方法，这个方法仅生成静态HTML，不会处理data-link的绑定逻辑。而$.link()会将数据转为可观察对象，同时把模板与DOM元素绑定，不仅能让输入框同步显示name字段值，还能实现数据的双向修改同步。

内容的提问来源于stack exchange，提问作者Chan Sam