如何在{{#each}}循环中的div中包装每一对

Question

问题是如何在div中的{{#each}}循环中包装每两个后续项目以获得此布局

<ul>
  <div>
    <li>first item</li>
    <li> second item</li>
  </div>
  <div>
    <li>third item</li>
    <li> fourth item</li>
  </div>
  // etc...
</ul>

该模型的

[
  {id: 1, name: 'first item'},
  {id: 2, name: 'second item'},
  {id: 3, name: 'third item'},
  {id: 4, name: 'fourth item'},
  // etc...
]

Answer 1

我不认为使用{{#each}}帮助可以直接实现此目的。

这是我要做的......

1

编写自定义模板助手（从{{#each}}开始）

2。重新建模数组

 model: function() {
      var arr = [
            {id: 1, name: 'first item'},
            {id: 2, name: 'second item'},
            {id: 3, name: 'third item'},
            {id: 4, name: 'fourth item'},
            // etc...
      ];
      // splits array in pairs of 2
      return _.chunk(arr, 2); 
 }

_.chunk是一个lodash助手，但你可以轻松地推出自己的实现。

模板：

 <ul>
 {{#each model as |pair|}}
      <li>{{pair.firstObject}}</li>
      <li>{{pair.lastObjectObject}}</li>
 {{/each}
 </ul>

.firstObject和.lastObject是Ember.Array个助手。 如果您已EXTEND_PROTOTYPES停用，则可以执行以下操作：

 <ul>
 {{#each model as |pair|}}
      {{#each pair as |item|}}
           <li>{{item}}</li>
      {{/each}
 {{/each}
 </ul>