javascript - dust.js 模板数据更新

Question

有没有一种方法可以在不重新渲染灰尘模板的情况下更新模板数据。

我的意思是这个。

我有一个成功的 dust 模板输出如下:

<ul>
    <li>John</li>
    <li>Mark</li>
    <li>Jim</li>
    <li>Nick</li>
</ul>

当我对我的数据进行更新时，例如:将“John”更改为“Peter”并将结果发送到数据库，我是否需要再次重新渲染 dust 模板(这将获取所有数据并重新- 在客户端绘制)或者有什么方法可以告诉 dust 仅更新值为“John”的 li(并将其更改为“peter”)？

Answer 1

您可以只使用较小的模板组件。这就是我的意思:

列表.tl:

<ul>
  <li>{>"listItem" name="John"/}</li>
  <li>{>"listItem" name="Mark"/}</li>
  <li>{>"listItem" name="Jim"/}</li>
  <li>{>"listItem" name="Nick"/}</li>
</ul>

listItem.tl:

{name}

然后，比方说，当您单击一个元素时，您可以执行如下操作:

document.getElementsByTagName('li').addEventListener('click', function() {
  var element = this;
  dust.render('listItem', {name: 'MyNewName'}, function(error, output) {
    element.innerHTML = output;
  });
}

有了这个，你只重新渲染实际被改变的部分。

编辑 1:调用另一个模板时不需要 .tl 扩展名，所以去掉它。