Question

为了控制页面的布局，我试图将模型传递给Ember组件并将其拼接成组。我无法弄清楚如何不必访问content._data并基本上重新创建模型。粗略的代码：

parentRoute.js

export default Ember.Route.extend({
  model() {
    return this.store.findAll('item');
  }
});

parentRoute.hbs

 {{ wall model=model }}

childComponent.js

export default Ember.Component.extend({
    groupedItems: Ember.computed(function() {
        // convert model data into array of objects
        let allItemss = this.get('model.content').map(function(obj){
            let mappedObj = obj._data;
            mappedObj.id = obj.id;
            return mappedObj;
        });

        // group into arrays of up to 3 for layout
        let groupedItems = [];
        while(allItems.length){
            groupedItems.push(allItems.splice(0,3));
        }

        return groupedItems;
    })
});

childComponent.hbs

{{#each groupedItems as |items|}}
        {{#each items as |item|}}
        <div class="item-group-{{items.length}}">
            <h2 class="headliner">
                {{ item.id }} {{ item.name }}
            </h2>
        </div>
        {{/each}}
{{/each}}

有更好的方法吗？我似乎无法让.then()与this.get('model')一起使用，item本身无法拼接，因为它是一个对象，而不是一个数组。

Answer 1

您应该能够直接访问模型，因为模型挂钩将在呈现页面之前解析“findAll”。此外，您的计算属性应引用“模型”，否则在模型更改时不会重新计算。像这样：

  groupedItems: Ember.computed('model', function() {
    // convert model data into array of objects.
    let allItems = this.get('model').map((item) => {
      return item;
    });
    let result = [];
    while (allItems.length) {
      result.push(allItems.splice(0, 3));
    }
    return result;
  })

正如您所看到的，您可以使用this.get('model')我实际上是一个类似于ember数组的对象，您可以对其进行数组操作。唯一的问题是你不能在它上面使用拼接，所以你必须将它转换为常规的数组格式。

或者您可以使用ember“slice”方法，并执行此操作

  groupedItems: Ember.computed('model', function() {
    let pos = 0;
    let result = [];
    while (pos < this.get('model.length')) {
      result.push(this.get('model').slice(pos, pos + 3));
      pos += 3;
    }
    return result;
  })

Answer 2

我在这里添加了一个灰烬旋转器，用于操作组件中的ember模型，并按长度3对项目进行分组。

https://ember-twiddle.com/f425ce4b7aa48529b9d7e00878e5e4db?openFiles=routes.index.js%2Ctemplates.components.wall-page.hbs

在组件中，ember计算属性如下所示。

import Ember from 'ember';

export default Ember.Component.extend({

  groupedItems: function() {
    let groupedItems = []
    ,   t = this
    ,   length  = this.get('alphaList.length') - 1
    ,   lastVal = length / 3;

    let allItems = this.get('alphaList').map(function(obj, index){
        if (index !== 0 && index % 3 === 0) {
          var otherArray = []; 
          for (var x = index-3; x<= index-1; x++ ) {
            otherArray.push(t.get('alphaList')[x]);
          }
          groupedItems.push(otherArray);
        }
    });

    if (length > 0) {
       var lastArray = [];
       for (var x = 3 * parseInt(lastVal); x<= length; x++ ) {
         lastArray.push(t.get('alphaList')[x]);
       }
       groupedItems.push(lastArray);
    }
    return groupedItems;
  }.property('alphaList')
});

在组件中操纵Ember模型

2 个答案: