Handlebarsテンプレートのdiv構造/スタイリングにユニークな変更を含めるにはどうすればいいですか？

Question

まだハンドルバーを習っているので、この質問が明確かどうかはわかりません。 私は人物オブジェクトの配列を持っています。私のテンプレートは、特定の人々に反復するまで、同じ構造のコンテナに配置された各人のイメージを保持するdivにはうまく機能します。

一番上の行は、2つ目の行にラップする前に、合計4つの等しいサイズのイメージにレンダリングされます。どのようにテンプレートを作成するのか分かりません。私のテンプレートがうまく動作する4つの画像の行。この巨大なグリッドの下部には、さまざまなサイズのバリエーションがあります。また、私の把握する必要があるオブジェクトの配列の中の特定の人々にもバリエーションがあります。

チュートリアルから、私は部分的に助けてくれると思っていましたが、{{#each}}がすべての文脈で部分的な部分を適用するのを防ぐ方法はわかりませんでした。これを行うにはどうすればよいでしょうか、これを達成するためにどんなヘルパー/機能が必要ですか？

例コード：

HTML expected 

<div class="person-image-grid"> 
    ..stuff 
</div> (x4) 
<div class="different-grid"> 
    <div class="person-image-grid"> 
    ..stuff 
    </div> 
    <div class="half-width video"> 
    A bigger div, about half the width of the page, with video of person 
    </div> 
    <div class="person-image-grid"> 
    ..stuff 
    </div> 
</div> 
<div class="person-image-grid"> 
    ..stuff 
</div> (x4) 

マイテンプレート

{{#each person}} 
    <div class="person-image-grid"> 
     <div class="person-image-grid_picture"> 
      <img class="person-image-grid_image" src="personImages/{{firstName}}_{{lastName}}/{{firstName}}{{lastName}}.jpg"> 
     </div> 
     <p class="person-image-grid_name">{{firstName}} {{lastName}}</p> 
    </div> 
{{/each}} 

JS

function _templateGridModal() { 
    var templateGridScript = document.getElementById("student-image-grid-template").innerHTML, 
    parentGrid = document.getElementsByClassName("student-image-grid")[0]; 

    var theTemplateGrid = Handlebars.compile(templateGridScript); 

    var obj = { 
    people: [ 
    {"firstName": "Joe", "about": "stuff", "quote": "a quote here"}, 
    {"firstName": "John", "about": "stuff" //etc}, 
    {"firstName": "Mary", "about": "stuff" //etc}, 
    {"firstName": "Tom", "about": "stuff" //etc} 
    //and so on 
    ] 
    }; 

    var theCompiledTemplateGrid = theTemplateGrid(obj); 
    parentGrid.innerHTML = theCompiledTemplateGrid; 
} 

Answer 1

私はテンプレートにすべての複雑な条件とカウンターを置くしようとして避けるだろう。 Handlebarsの背後にある考え方は、ロジックがビューレイヤー内にあってはならないということです。このように動作するように、カスタムヘルパーコードをたくさん書いていると思います。代わりにpeopleリストをチャンクすることをお勧めします。これはの前にテンプレートになります。単一の行であるかどうかに関わらず、各行のデータを保持する「行」オブジェクトが交互に並んでいる配列と、その行にレンダリングする列（人物）を持つことができます。 rows配列は次のようになります。

var rows = [ 
    { 
     is_single: false, 
     people: [] //Array[4] 
    }, 
    { 
     is_single: true, 
     people: [] //Array[1] 
    } 
]; 

この時点で、最も挑戦的な部分は、動的にpeople配列からrows、アレイを構築するために必要な数学を把握することです。

// 2 rows for every 5 people + 1 row for any remainders 
var num_rows = Math.floor(people.length/5) * 2 + (people.length % 5 ? 1 : 0); 

var rows = []; 

for (var i = 0; i < num_rows; i += 1) { 
    var is_single = Boolean(i % 2); 
    var start_index = is_single ? (Math.floor(i/2) + 4 * (Math.floor(i/2) + 1)) : (2 * i + Math.floor(i/2)); 
    var end_index = is_single ? start_index + 1 : start_index + 4; 

    rows.push({ 
     is_single: is_single, 
     people: people.slice(start_index, end_index) 
    }); 
} 

私たちがしなければ残っているすべては私たちのrowsオブジェクトを反復処理すると、該当するマークアップをレンダリングするために再書き込み私たちのテンプレートにある：私は、またはそれを行うための最善の方法であってもなくてもよいの実装を作成しました各行のis_singleフラグに基づい：

{{#each rows}} 
    {{#if is_single}} 
     <div class="different-grid"> 
      {{#with (lookup people 0)}} 
       <div class="person-image-grid"> 
        {{firstName}} 
       </div> 
      {{/with}} 
      <div class="half-width video"> 
       A bigger div, about half the width of the page, with video of person 
      </div> 
      <div class="person-image-grid"> 
       ..stuff 
      </div> 
     </div> 
    {{else}} 
     {{#each people}} 
      <div class="person-image-grid"> 
       {{firstName}} 
      </div> 
     {{/each}} 
    {{/if}} 
{{/each}} 

Iは、参考のために、例えばfiddleを作成しました。