javascript - 在组件中操作 Ember 模型

Question

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

parentRoute.js

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

父路径.hbs

 {{ wall model=model }}

子组件.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;
    })
});

子组件.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

您应该能够直接访问模型，因为模型 Hook 将在呈现页面之前解析“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 的“切片”方法，然后执行此操作

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