Emberjs，每塊幫手先進

Question

這是我的平面模型：

[ 
    { id: 1, title: '', body: '' }, 
    { id: 2, title: '', body: '' }, 
    { id: 3, title: '', body: '' }, 
    { id: 4, title: '', body: '' }, 
    // ... 
] 

這是我預期的模板：

<div class="row"> 
    <div class="col-md-4 col-md-offset-2"> 
     <h6>{{! item1 title }}</h6> 
     <p>{{! item1 body}}</p> 
    </div> 
    <div class="col-md-4 col-md-offset-1"> 
     <h6>{{! item2 title}}</h6> 
     <p>{{! item2 body}}</p> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-md-4 col-md-offset-2"> 
     <h6>{{! item3 title }}</h6> 
     <p>{{! item3 body}}</p> 
    </div> 
    <div class="col-md-4 col-md-offset-1"> 
     <h6>{{! item4 title}}</h6> 
     <p>{{! item4 body}}</p> 
    </div> 
    </div> 
    <!-- ... --> 

什麼是灰燼的方法來做到這一點？

簡單的每個幫助程序都無濟於事，因爲模板組合了模型中的兩個元素。

我是否應該更改我的模型，自定義數組控制器，構建組件，編寫模板助手還是有內置解決方案來解決這個簡單問題？

Answer 1

你應該改變你的數據結構。我仍然使用一個ArrayController，但同時我會在它上面添加一個計算屬性，將所有內容分組（我猜你的模式是每隔一個）。

App.FooController = Em.ArrayController.extend({ 
    groupedItems: function(){ 
    var groups = [], 
     group, 
     model = this.get('model'), 
     len = this.get('length'); 
    for(var i = 0;i<len;i++){ 
     if(i%2==0){ 
     group = []; 
     groups.push(group); 
     } 
     group.push(model[i]); 
    } 
    return groups; 
    }.property('model.[]') 
}); 

{{#each item in groupedItems}} 
    <div class="row"> 
    <div class="col-md-4 col-md-offset-2"> 
     <h6>{{ item.firstObject.title }}</h6> 
     <p>{{ item.firstObject.body}}</p> 
    </div> 
    <div class="col-md-4 col-md-offset-1"> 
     <h6>{{item.lastObject.title}}</h6> 
     <p>{{item.lastObject.body}}</p> 
    </div> 
    </div> 
{{/each}} 

老實說，也有將它們分組的方式擺，我想說明的是分組將是最簡單的點。