For a long time client-side templating languages has somewhat bothered me. Since they all take strings as input and re-renders those to DOM elements on every small change you want to make. That has always sounded bit silly to me. Why not just create the DOM tree once and then just manipulate the bits you want to be changed?
Well in practice that’s lots of work even with help of jQuery. Surprisingly it
appears that templating languages are not invented without a reason. Although
there are several templating languages that are made for DOM only manipulation,
but for reason or another I haven’t liked any of them until I was told to try
Since it not directly obvious how use it with Backbone and similar client-side frameworks efficiently I’ll give a simple example here.
First you must have some base DOM elements which can be used as templates:
1 2 3 4 5 6 7 8 9 10 11 12
These can be anywhere in the DOM. Just add some CSS to hide it:
1 2 3
Next we will create a simple Backbone View which will demonstrate Transparency usage with Backbone. It just displays a name and some random values.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
The view is used like any other Backbone View:
1 2 3 4 5 6 7 8 9 10 11
With Transparency there is one feature or gotcha you must be aware of. The
state of the
view.el element is not completely reset between render calls.
This can be an advantage in some situations. For example you could do some
additional manipulation with jQuery to it which is not lost between render
calls. But if you need to reset it you can just reclone the base element again.
Here’s a fully working fiddle of this example for you to play with.
This sounds very promising to me and I’m going to try it in some project when I get the chance.