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

老实说，有很多方法可以对它们进行分组，我试图制作的分组是最简单的。

Emberjs，每个块助手都进步了

1 个答案: