Handlebars doesn’t allow to supply single row template for generation of multiple rows result

I was asked to prepare to talk about Javascript rendering template libraries. I was using only JSRender however I was told that Handlebars is better. So I decided to rewrite a single page to use Handlebars instead of JSRender. During this process I found one feature which is available in JSRender and which Handlebars lacks.
I am using JSRender to create multiple rows from template describing one row by template script similar to this one (this example is intentionally simplified from the real example I use):

 id="oneRowTmpl" type="text/x-jsrender">
tr class="dataRow">
    td class="dataCell">{{>FirstName}}td>
    td class="dataCell">{{>LastName}}td>
tr>

I use the following destination markup element

<table class="list" border="0" cellpadding="0" cellspacing="0" id="usersTable">
        <thead class="rich-table-thead">
            <tr class="headerRow ">
                    <th class="headerRow">FirstName</th>
                    <th class="headerRow">LastName</th>
                </tr>
            </thead>
            <tbody id="usersTableBody">

            </tbody>     
        </table>

and this transformation script:

var html = $("#oneRowTmpl").render([{'FirstName':'Bob','LastName':'Marley'},
{'FirstName':'Arnold','LastName':'Schwargenegger'}]);
 $("#usersTableBody").html(html);

I have heard that many developers praise Handlebars and I decided to try to rewrite my code using handlebars, but looks like this example doesn’t work in Handlebars.

If I use similar template script for Handlebars

 id="oneRowTmpl" type="text/x-handlebars-template">
tr class="dataRow">
    td class="dataCell">{{FirstName}}td>
    td class="dataCell">{{LastName}}td>
tr>

and the same destination markup element and this transformation script:

var template = Handlebars.compile( $('#oneRowTmpl').html() );
$('#usersTableBody').append( template([{'FirstName':'Bob','LastName':'Marley'},
{'FirstName':'Arnold','LastName':'Schwargenegger'}]) );

it just wouldn’t work.

Looks like Handlebars just doesn’t allow supplying single row template for generation of multiple rows result.

I understand that I could use for loop in javascript like this

var template = Handlebars.compile( $('#oneRowTmpl').html() );
data = [{'FirstName':'Bob','LastName':'Marley'},
{'FirstName':'Arnold','LastName':'Schwargenegger'}];
for ( var i = 0; i < data.length; i++) {
                    $('#usersTableBody').append( template(data[i]) );
                }

or I could use additional loop template like this

 id="oneRowTmpl" type="text/x-jsrender">
{{#each users}} tr class="dataRow">
    td class="dataCell">{{>FirstName}}td>
    td class="dataCell">{{>LastName}}td>
tr>{{/each}}

and then I could use another transformation script

var template = Handlebars.compile( $('#oneRowTmpl').html() );
data = [{'FirstName':'Bob','LastName':'Marley'},
{'FirstName':'Arnold','LastName':'Schwargenegger'}]; 
$('#usersTableBody').append( template({'users':data}) );

Still, I don’t understand why Handlebars framework is so praised if it doesn’t contain so simple useful feature?
I wonder which other Javascript Templating libraries lack this feature?

Advertisements
This entry was posted in javascript and tagged , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s