I'm considering adding an alternative to CanJS's EJS live-binding system. I really like EJS, it's extremely powerful, but ugly to look at. So, I'm trying to create a better mouse-trap.
Currently, the most popular mouse-trap seems to be Handlebars. What do you like about it?
- Syntax, or
- Prepared data
Handlebars uses {{}}
for insertion and {{#}}
and {{/}}
for widgets and control structures.
All data must be passed to handlebars (except accessed through a helper). You can not seemingly call helper methods that read data like {{person.age()}}
. This limits logic that can be performed in the template (although a helper can still do pretty much anything).
I'd like to learn what people like about handlebars and use that in the design of the alternative templating language. But, there's two issues I would have to overcome:
Prepared data is something that has been strongly promoted on the server and it also is being promoted on the client. I don't consider it as much an imperative on the client. I've never seen anyone fire an ajax call in a template. The data is always prepared, it's just accessed through the model or other helpers.
Needing prepared data makes doing something like http://jsfiddle.net/qYdwR/36/light/ with Handlebars more difficult to write. You'd have to create a computed property that is the date merged with this updating time observable.
With EJS, you can just write a function and anything that uses it becomes live.
I don't think it's possible in Handlebars, but EJS supports ERB-style sub template helpers (if you wanted to build them) like:
<%== columns(items, 4, function(item){ %>
<li><%= item.attr('name') %></li>
<% }) %>
Notice that the function(item){ ... }
is actually a template that is called out to by the columns helper implemented like:
columns = function(items, num, template){
var cols = new Array(num);
items.forEach(function(item, i){
if( ! cols[i%num] ) {
cols[i%num] = "";
}
cols[i%num] += template(item)
});
return "<ul>"+cols.join("</ul><ul>")+"</ul>";
}
And this would also instantly become live.
We built a simple JMVC live Handlebars plugin (I'm waiting for approval to open source it.) But we had a few principles that I think are key to making living binding with handlebars helpful but not harmful:
If you keep all that in mind, you can have nice live bound handlebars templates that do 90% of the live binding you want. That other 10% would probably need some custom code anyway, so you're better off without it.
There were basically 3 classes of binding:
$.String
.sub e.g.,<div {{bindAttr class="foo bar-{someAttr}"}}>...
(alsobindVal
,bindProp
,bindText
, etc.)That gives you all the power you need without being too magical. You do have to create custom
$.Observe
objects if you want to bind to a computed value, but we prefer that in any case as Models/Observes are a lot easier to test.Hopefully in the next day or two I can get our plugin out in the wild.