javascript - Emberjs - 循环遍历数组 'each' ，但每三个对象执行不同的操作

Question

当使用bootstrap + emberjs时，我想创建一个新的<div class="row">对于数组中的每三个对象。

这就是我使用 Ruby+Rails 解决相同问题的方法。

<% @movies.in_groups_of(3) do |group| %>
    <div class="row">
    <% group.each do |movie| %>
         <div class="col-md-4">
             <h3><%= movie.title</h3>
             <%= image_tag(movie.thumb_url) %>
         </div>
     <% end %>
     </div>
<% end %>

我不确定(并且正在寻求帮助)处理这个问题的“ Ember 方式”是什么，显然下面的代码每次循环完成时都会产生一个新行 - 这不是期望的结果。

{{#each model as |movie|}}
  <div class="row">
    <div class="col-md-4">
      <h3>{{movie.title}}</h3>
      <strong>Category Name</strong>
      <img width="100%" src="{{movie.thumb_url}}" alt="" />
    </div>
  </div>
{{/each}}

非常感谢您的帮助 - 谢谢!

Answer 1

参见 this ember-twiddle有关此答案中两种解决方案的工作示例。

您可以使用模帮助器和 {{#each}} 的索引参数对每 n 个元素执行某些操作，但这无法生成您想要的结构，因为所有元素{{if}} block 中的内容必须关闭。

如果您不需要将三个元素组成的组包装在父元素中，则可以使用以下方法:

app/helpers/mod.js

export function mod(params/*, hash*/) {
  return params[0] % params[1] == params[2];
}

export default Ember.Helper.helper(mod);

app/templates/application.hbs

{{#each elements as |el idx|}}
  <p>{{el}} {{if (mod idx 3 2) "3rd!"}}</p>
{{/each}}

但是，如果您想将每三个元素包装在父元素中，则需要创建一个计算属性来对元素进行分组:

app/controllers/application.js

export default Ember.Controller.extend({
  elements: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'i'],
  elementsInThrees: Ember.computed('elements', function () {
    var elementsInThrees = [];
    var currentGroup = [];
    this.get('elements').forEach((el, idx) => {
      if (idx % 3 == 0) {
        if (currentGroup.length) {
          elementsInThrees.push(currentGroup);
        }
        currentGroup = [];
      }
      currentGroup.push(el);
    });
    if (currentGroup.length) {
      elementsInThrees.push(currentGroup);
    }
    return elementsInThrees;
  }),
});

app/templates/application.hbs

<table>
  {{#each elementsInThrees as |elGroup|}}
    <tr>
      {{#each elGroup as |el|}}
        <td>{{el}}</td>
      {{/each}}
    </tr>
  {{/each}}
</table>