在组件中操纵 Ember 模型

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"。此外，您计算的属性应该引用 'model'，否则当模型更改时它不会重新计算。像这样：

  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 类似数组的对象，您可以对其进行数组操作。唯一就是不能用splice对它进行拼接，所以要转成正规的数组格式。

或者您可以使用 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-twiddle 用于在组件中操纵 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 模型

Manipulating Ember Model in Component

javascript

ember.js

ember-data