Fork me on GitHub


DOM templating made natural


ist.js v0.6 can finally update nodes !

25 November 2013 permalink

After having rewritten the template renderer 3 times, ist.js is finally able to update rendered nodes. I settled on an approach that is MUCH simpler that anything I had attempted before, and that just works (I guess taking a break from ist.js for several months also helped).

Fragments returned from a template render() method now have an additional update() method to update rendering, so you must keep a reference on those fragments to be able to update them (even if you called somenode.appendChild(fragment), and as a consequence the fragment itself is now empty).

Here is a quick example:

var template = ist("div '{{ foo }}'"),
    rendered = template.render({ foo: "bar" });

// <div>bar</div>

// rendered is now empty, but it still holds the update() method !
rendered.update({ foo: "baz" });
// <div>baz</div>

You can call the update() method with a new context object, or without any arguments to reuse the same object as before.

Some methods have also been renamed in this version. The goal is to have short method names everywhere. Template#findPartial is now Template#partial, ist.fromScriptTag became ist.script and ist.createNode is now ist.create. The previous methods will still work for a few releases.

The syntax for directive helpers has changed a bit since 0.5.7, and they must be written a bit differently to cope with updating (as the same helper will be called for both rendering and updating). As always, refer to the documentation for more details and examples.

Finally, my apologies to people reading those news in a feed reader, as the last update caused all previous news posts to be seen as new (this was a consequence of moving urls to