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

老实说，也有将它们分组的方式摆，我想说明的是分组将是最简单的点。