Ember.js对象的Handlebars模板分为两组 [英] Handlebars template for Ember.js objects grouped by two

问题描述

我有我的数据在集合中，我需要将它们渲染到模板中。当数据分组为2时，如何实现结果？我需要这样排序：

  ._______________________ 
 | 1 | 3 | 5 
 | ___ | ___ | _______________ 
 | 2 | 4 |等等... 
 | ___ | ___ | _______________ 
  

我已经创建了垂直div元素为每个1 + 2，3 + 4，...对来设计这样的项目。如何使用把手将数据呈现到这样的网格中？我可以做的是这样的：

  {{每个App.myController}} 
 ...呈现项目。 
 {{/ each}} 
  

解决方案

首先，如果在布局中尽可能地尝试在CSS中执行此操作。

如果没有，最好的方法是将计算属性添加到控制器中将它们分组成对，并以这种方式进行。这样的东西：

  {{每个App.myController.pairedContent}} 
<！ - content.firstObject  - > 
<！ -  view for content.lastObject  - > 
 {{/ each}} 
 
 App.MyController = Ember.ArrayController.extend（{
 pairsContent：（function（）{
 return this.get内容'）。reduce（function（array，object，index）{
 if（index％2）{
 array.get（'lastObject'）。pushObject（object）
} 
 else {
 array.pushObject（Ember.A（[object]））
} 
返回数组
}，Ember.A（））
}） .property（'content'）
}）
  

I have my data in the collection and I need to render them into the template. How can I achieve the result when the data is grouped by two? I need to sort them like this:

._______________________
| 1 | 3 | 5
|___|___|_______________
| 2 | 4 | and so on...
|___|___|_______________

I have created vertical div element for each 1+2, 3+4, ... pair to style the items like this. How can I render the data in to such grid with handlebars? All I can do is this:

{{#each App.myController}}
 ... render item ...
{{/each}}

解决方案

Firstly, i'd attempt to do this in CSS if at all possible in your layout.

If not, your best bet would to add a computed property to your controller that groups them into pairs and do it that way. Something like this:

{{#each App.myController.pairedContent}}
  <!-- view for content.firstObject -->
  <!-- view for content.lastObject -->
{{/each}}

App.MyController = Ember.ArrayController.extend({
  pairedContent: ( function(){
    return this.get('content').reduce( function(array, object, index){
      if(index % 2){
        array.get('lastObject').pushObject(object)
      }
      else{
        array.pushObject(Ember.A([object]))
      }
      return array
    }, Ember.A())
  }).property('content')
})

这篇关于Ember.js对象的Handlebars模板分为两组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！