是否可以设置handlebars.js/moustache.js模板的不同部分？

Question

我有以下项目模型：

{ 
    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" 
      } 

      ] 
} 

重复此模式为其他年直至2012年。当客户点击了一年，与之搭配的the_yearId模型放入Backbone.Collection，这是然后递交给视图，以及适当的模板。非常直截了当。

我使用handlebars.js为模板，车把代码副本如下：

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

这将通过集合中的每个模型可预测环路和正确填充。如果我在每次迭代中添加HTML结构和CSS样式，则样式将相同。

有没有办法以不同方式对页面的每个部分进行样式设置？例如，如果集合包含4个模型，我如何设计把手模板的样式以将第一个模型放在100％宽度的标题中，第二个和第三个模型放在另一个部分中，每个模型的样式都是50％宽度。第四个模型将被设计为100％宽度的页脚。

将jQuery的动态分配给模型一旦他们被放置在DOM中会有用吗？有没有更好的办法？

编辑 我想做的事：

<!-- 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

您可以使用三个独立的模板：

<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> 

和一些CSS：

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

理清宽度。请注意切换到样式的类属性，以避免可能的重复id s。然后剁成阵列分为三个部分中的JavaScript：

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

演示：http://jsfiddle.net/ambiguous/F3Acm/1/

你也可以使用相同的技术，但在一个模板把一切：

<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> 

，然后处理编译模板三个变量：

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

演示：http://jsfiddle.net/ambiguous/yD7wF/

您也可以使用偏分量。这四个模板将如下所示：

{{>顶}} {{>中部}} {{>底部}}

然后注册部分并填写模板：

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 
})); 

演示：http://jsfiddle.net/ambiguous/LLqY9/

哪种方法您使用取决于哪一个最适合你的情况。