Intro
In a previous blog post I provided the basics for creating an HTML template using the handlebars JavaScript library. In that post, I stuck to a very basic template. This time I will kick it up a notch and cover partials. You might be asking “What do I need partials for?” and you asking gives me a way to start explaining. So thanks for asking.

Let’s say you are making several templates from some data that is similar, but not identical. For example, sports leagues. Sports leagues are very similar in how they are composed, but not always identical. Some leagues call the major split conferences others call them leagues. Inside of a league there might be divisions; who knows. But at some point, we get to a level where it’s a single team, and we want all teams to have the same visual representation. This is where the handlebars partial comes in to play. I can make a team template, and use it any other template I want. All I have to do is register that partial with the handlebars library, then reference the partial in my template, and BOOM!, I have the same look across all sports leagues, conferences, divisions, whatever.

For now, I am focusing on one league (the NHL), so each team object has the name of the team, the location, the conference, and the division. I want each team to have the same look, so I am going to make a team template.

<script id="team-template" type="text/x-handlebars-template">
    <div class="teamDiv">
        <h3>
            {{location}} {{name}}
        </h3>
    </div>
</script>

Yes, that template is pretty basic and, for the moment, could go in line with the rest of my template, but if later on I make the template more complex, or I change to have the teams separated out by the conference/division, or I add more sports, I might end up with duplicated code.

Now that I have made my partial, it needs to be registered before it can be used. That is easy to do, and looks like this:

Handlebars.registerPartial("teamTemplate", $("#team-template").html());

Finally, once I have told the Handlebars engine about the template, I can use that partial in other templates. That notation looks like this:

{{> teamTemplate}}

Anywhere that appears in a handlebars script, my partial will be used.

My full template looks like so:

<script id="sports-template" type="text/x-handlebars-template">
    <div id="sport-list">
        {{#each leagues}}
        <div id="league-accordion" class="panel-group">
            <div class="league-header">
                <h1>{{{name}}} ({{acronym}})</h1>
            </div>

            <h3>Founded {{{founded}}}</h3>
            <div class="panel panel-default">
                {{#each teams}}
                {{> teamTemplate}}
                {{/each}}
            </div>
        </div>
        {{/each}}
    </div>
</script>

When I combine all that with my data, I get something like:

<div id="league-accordion" class="panel-group">
    <div class="league-header">
        <h1>National Hockey League (NHL)</h1>
    </div>
    <h3>Founded 1917</h3>
    <div class="panel panel-default">
    <div class="teamDiv">
        <h3>
            Colorado Avalanche
        </h3>
    </div>
    <div class="teamDiv">
        <h3>
            Chicago Blackhawks
        </h3>
    </div>
    <div class="teamDiv">
        <h3>
            Columbus Blue Jackets
        </h3>
    </div>
    <div class="teamDiv">
        <h3>
            St. Louis Blues
        </h3>
    </div>
    <div class="teamDiv">
        <h3>
            Boston Bruins
        </h3>
    </div>
    <div class="teamDiv">
        <h3>
            Montreal Canadians
        </h3>
    </div>
    <div class="teamDiv">
        <h3>
            Vancouver Canucks
        </h3>
    </div>
    <div class="teamDiv">
        <h3>
            Washington Capitals
        </h3>
    </div>
    <div class="teamDiv">
        <h3>
            Phoenix Coyotes
        </h3>
    </div>
    <div class="teamDiv">
        <h3>
            New Jersey Devils
        </h3>
    </div>
          ...      
    </div>
</div>

The power of this becomes more obvious as I try to sort my data with the user helpers…..in my next blog.