Using Handlebars Templates to Render HTML on the Client by Dan Wahlin

Home > Blogs > Developer Visual Studio / ASP.NET > Using Handlebars Templates to Render HTML on the Client

Using Handlebars Templates to Render HTML on the Client

Added by Dan Wahlin January 25, 2013

As more and more functionality moves to the client it's important to convert JSON data into HTML using techniques that make maintenance easy down the road. Fortunately, there are several different template frameworks out there that can be used to generate HTML without having to write a ton of JavaScript. One of my personal favorites is called Handlebars. It's a simple client-side template framework that makes it easy to bind data to templates and generate HTML dynamically.

If you need to convert JSON data retrieved from an Ajax call to HTML, Handlebars provides a simple way to do it that makes maintenance a snap down the road. Simply define templates, retrieve your data, and then bind it to one or more templates using the Handlebars API. An example of a Handlebars template is shown next:

<script id="AccountPositionsTemplate" type="text/x-handlebars-template">
    <div class="content">
        <header>
            <span>Account Positions</span>
        </header>       
        <section>
            <br />
            <div class="Currency Positive" style="font-size:16pt;">
               Total: {{PositionsTotal}}
            </div>
        </section>     
    </div>
</script>

<span>Account Positions</span>

</header>

<br />

Total: {{PositionsTotal}}

</div>

</section>

</div>

</script>

Notice that the template is defined inside of a <script> element and has an ID of AccountPositionsTemplate. To prevent the browser from treating the template code as JavaScript, the type attribute is set to a value of text/x-handlebars-template. This allows the template to be defined in a page without generating a script error.

Looking at the template code you can see the Handlebars binding syntax in action. The {{PositionsTotal}} token will bind the PositionsTotal property of any object assigned to the template into the HTML. In other words, it will cause the value of the property to be output along with all of the HTML defined in the template. This provides a great way to dynamically generate HTML without having to write a lot of custom JavaScript to do it.

In situations where properties bound into a template contain a list of items such as an array, a Handlebars loop can be defined to output the values dynamically. The following template adds additional functionality into the template shown earlier and loops through an array of items defined in a Positions property:

<script id="AccountPositionsTemplate" type="text/x-handlebars-template">
    <div class="content">
        <header>
            <span>Account Positions</span>
        </header>
        <section>
            <table id="AccountPositionsTable">
                <thead title="Click a column to sort">
                    <tr>
                        <th>Symbol</th>
                        <th>Shares</th>
                        <th>Last</th>
                        <th>Change</th>
                        <th>% Chg</th>
                        <th>Open</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each Positions}}     
                        <tr>
                            <td>{{ Security.Symbol }}</td>
                            <td>{{ Shares }}</td>
                            <td>{{ Security.Last }}</td>                            
                            <td>{{ Security.Change }}</td>
                            <td>{{ Security.PercentChange }}</td>
                            <td>{{ Security.Open }}</td>
                            <td class="Currency">{{ Total}}</td>
                        </tr>
                    {{/each}}
                </tbody>
            </table>
        </section>       
    </div>
    <div class="stickyfooter">       
        <div class="Left Bold">Total:</div>
        <div class="Right">
            <span class="Currency">{{PositionsTotal}}</span>
        </div>
        <div class="Clear" />           
    </div>
</script>

<span>Account Positions</span>

</header>

<tr>

<th>Symbol</th>

<th>Shares</th>

<th>Change</th>

<th>Total</th>

</tr>

</thead>

<tbody>

<tr>

<td>{{ Security.Symbol }}</td>

<td>{{ Shares }}</td>

<td>{{ Security.Last }}</td>

<td>{{ Security.Change }}</td>

<td>{{ Security.PercentChange }}</td>

<td>{{ Security.Open }}</td>

<td class="Currency">{{ Total}}</td>

</tr>

</tbody>

</table>

</section>

</div>

<div class="Left Bold">Total:</div>

<span class="Currency">{{PositionsTotal}}</span>

</div>

</div>

</script>

The {{#each Positions}} syntax starts the loop and the {{/each}} syntax ends the loop. Each position that is looped through has a Security property, a Total property, and a Shares property. The Security property is a complex object containing its own properties such as Symbol, Last, Change, PercentChange and Open which will be written out in the HTML that is generated.

To bind data to the template, the template HTML must first be found and passed into the Handlebars compile() function as shown next (this code uses jQuery to find the template and retrieve it's HTML):

	var source&nbsp;&nbsp; = $(&#39;#AccountPositionsTemplate&#39;).html();

	var template = Handlebars.compile(source);

var source   = $('#AccountPositionsTemplate').html();

var template = Handlebars.compile(source);

Once the template object is created it can be invoked and the data can be passed into it. This will return the HTML with the data merged in as shown next:

	var data = getData(); //Data returned from an Ajax call

	var html = template(data); //bind data into template and generate HTML

	$(&#39;#TargetDiv&#39;).html(html);