是否可以設置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/

哪種方法您使用取決於哪一個最適合你的情況。