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.