dust.js模板数据更新

Question

is there a way to update the template data without re-rendering the dust template.

What i mean is this.

I have a successful dust template that outputs the following:

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

when i do an update on my data, for example: change "John" to "Peter" and sent the result to the database, do I need to re-render the dust template again (which will take all data and re-draw it on the client) or is there any way to tell dust to update ONLY the li with the value "John" ( and change it to "peter")?

Answer 1

You could just use smaller template components. Here's what I mean:

list.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}

Then when you, let's say, click on an element, you could do something like this:

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

With this, you only re-render the part that is actually being changed.

EDIT 1: You don't need the .tl extension when calling another template, so got rid of that.