justinbmeyer/handlebars.md

## handlebars.md

      
    Raw
  

              handlebars.md
            
          
    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

Syntax

Handlebars uses {{}} for insertion and {{#}} and {{/}} for widgets and control structures.
Prepared data

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).
Concerns about live-binding and handlebars

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

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.
Limited "helpers" (this is no longer a concern ... Handlebars must support this)

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.