Is it possible to style different sections of handlebars.js/moustache.js templates?

Question

I have the following project models:

 {
  the_yearId: "2009",
  title:  "First 2009 Project",
  className: "header",
  id: "null",
  images: [
           {
              title: "first-2009-project-image1.png",
              caption: "about first 2009 project image 1"
            },
           {
              title: "second-2009-project-image2.png",
              caption: "about first 2009 project image 2"
            }

          ]
}

{
      the_yearId: "2009",
      title:  "Second 2009 Project",
      className: "leftColumn",
      id: "null",
      images: [
               {
                title: "second-2009-project-image1.png",
                caption: "about second 2009 project image 1"
               },
               {
                title: "second-2009-project-image2.png",
                caption: "about second 2009 project image 2"
                }

               ]
    }
{
          the_yearId: "2009",
          title:  "Third 2009 Project",
          className: "rightColumn",
          id: "null",
          images: [
                   {
                    title: "third-2009-project-image1.png",
                    caption: "about third 2009 project image 1"
                   },
                   {
                    title: "third-2009-project-image2.png",
                    caption: "about third 2009 project image 2"
                    }

                   ]
        }
{
  the_yearId: "2010",
  title:  "First 2010 Project",
  images: [
           {
              title: "first-2010-project-image1.png",
              caption: "about first 2010 project image 1"
            },
           {
              title: "second-2010-project-image2.png",
              caption: "about first 2010 project image 2"
            }

          ]
}

This pattern is repeated for other years up to 2012. When the client clicks on the year, the models with matching the_yearId are placed into a Backbone.Collection, which is then handed to the view, and the proper template. Pretty straight forward.

I am using handlebars.js for the templates, and the copy of the handlebars code is below:

{{title}}
{{#each images}}
{{this.title}}
{{this.caption}}
{{/each}}

This will predictably loop through each model in the collection and populate correctly. If I add HTML structure and CSS styles each iteration, will be styled the same.

Is there a way to style each section of the page differently? For example, if the collection holds 4 models how could I style the handlebars template to place the first model in the header with 100% width, the second and third models in another section that each would be styled with 50% width. The fourth model would be styled as the footer with 100% width.

Would jQuery be useful to dynamically assign the classes to the models once they're placed in the DOM? Is there a better way?

EDIT I want to do:

<!-- if model.className == "header" -->
<section id="single-column">
   <article>
      <header>First 2009 Project</header>
      <img src="first-2009-project-image1.png"></img>
   </article>
</section>

<section id="two-column">
   <!-- if model.className == "leftColumn" --> 
   <article>
      <header>Second 2009 Project</header>
      <img src="second-2009-project-image1.png">
   </article>
<!-- if model.className == "rightColumn" -->
   <article>
      <header>Third 2009 Project</header>
      <img src="third-2009-project-image1.png">
   </article>
</section>

<footer>
<!-- if model.className == "footer" -->
  <header>Fourth 2009 Project</header>
  <img src="fourth-2009-project-image1.png">
</footer>

Answer 1

You could use three separate templates:

<script id="top" type="text/x-handlebars">
    <section class="single-column">
       ...
    </section>
</script>
<script id="middle" type="text/x-handlebars">
    <section class="two-column">
        ...
    </section>
</script>
<script id="bottom" type="text/x-handlebars">
    <footer class="single-column">
        ...
    </footer>
</script>

and some CSS:

.two-column {
    width: 50%;
    ...
}
.single-column {
    width: 100%;
    ...
}

to sort out the widths. Note the switch to class attributes for the styling, that avoids possible duplicate ids. Then chop the array into three pieces in JavaScript:

var top    = images.shift();
var bottom = images.pop();
// the middle is left in images.

Demo: http://jsfiddle.net/ambiguous/F3Acm/1/

You could also use the same technique but leave everything in one template:

<script id="t" type="text/x-handlebars">
    <section class="single-column">
       <!-- do things with {{top}} in here -->
    </section>
    <section class="two-column">
        <!-- do things with {{middle}} in here -->
    </section>
    <footer class="single-column">
        <!-- do things with {{bottom}} in here -->
    </footer>
</script>

and then handle the compiled template three variables:

var t = Handlebars.compile($('#t').html());
var h = t({
    top:    top,
    middle: images,
    bottom: bottom
});

Demo: http://jsfiddle.net/ambiguous/yD7wF/

You could also use partials. The four templates would look like:

{{> top}} {{> middle}} {{> bottom}}

Then register the partials and fill in the template:

Handlebars.registerPartial('top',    $('#top').html());
Handlebars.registerPartial('middle', $('#middle').html());
Handlebars.registerPartial('bottom', $('#top').html());
var t = Handlebars.compile($('#t').html());
var h = t({
    top:    first,
    middle: images,
    bottom: last
}));

Demo: http://jsfiddle.net/ambiguous/LLqY9/

Which approach you use depends on which one fits best with your situation.