迁移jQuery.tmpl至JsRender：如何获取模板数据并更新绑定？

在 JsRender/JsViews 体系中，实现数据更新后视图自动同步的核心是利用可观察对象（Observable），而不是直接修改普通JS对象属性。以下是针对你的场景的正确实现方案：

1. 核心修正点 #

• 用 $.observable() 包装数据对象，让属性变化可被追踪
• 通过 $(this).view().data 获取当前视图绑定的数据项（替代原 tmplItem().data）
• 使用 $.observable(data).setProperty() 修改属性，自动触发视图更新（无需手动调用类似 update() 的方法）

2. 完整代码示例 #

JavaScript 部分 #

// 初始化时将数据转为可观察对象
var itemData = $.observable({ showItem: false });

// 渲染并绑定模板到容器（假设模板id为itemTmpl）
$("#container").link(true, itemData, "#itemTmpl");

function updateItem(event) {
  // 获取当前视图对应的绑定数据
  var currentData = $(this).view().data;
  // 更新属性，自动触发视图刷新
  $.observable(currentData).setProperty("showItem", !currentData.showItem);
}

HTML 模板部分 #

<script id="itemTmpl" type="text/x-jsrender">
  {{if showItem}}
    <div>This is your item.</div>
  {{else}}
    <div>No item.</div>
  {{/if}}
  <!-- 触发更新的按钮 -->
  <button onclick="updateItem(event)">切换显示状态</button>
</script>

<!-- 模板渲染容器 -->
<div id="container"></div>

3. 备选方案：手动重新渲染（不推荐） #

如果因特殊场景无法使用可观察对象，也可以手动重新渲染当前视图，但这种方式会丢失现有事件绑定，仅作应急方案：

function updateItem(event) {
  var view = $(this).view();
  var currentData = view.data;
  currentData.showItem = !currentData.showItem;
  // 重新渲染并替换当前视图内容
  view.render(true);
}

内容的提问来源于stack exchange，提问作者Vignesh VS