如何使用“计算”方法收集子数组是新数组？

Question

我有一个包含子 arrays 的数组列表。如何收集这些数组并将它们 return 作为新数组？

这是我的尝试，但没有用：

transactions: Ember.computed.map('model.cardList', function(card, index ){
        return card.get('transactions');
    },[]), // collecting all sub arrays but not works!!

sortedCards: Ember.computed(function(){
        return this.get('model.cardList'); //length 4 
    }.property([])), //can i store here?

从父数组中收集子数组的正确方法是什么？需要进行排序。

提前致谢。

在这里尝试，但没有任何效果： Twiddle

更新

根据twiddle，我想打印 categoryName 带有水果名称的列表。

Answer 1

在您的情况下，您甚至不必计算数组的子数组。鉴于您加载的模型如下（取自您的旋转）：

export default Ember.Route.extend({
    model(){
        return {
            "values" : [
              {
                "category" : "category1",
                "fruits" :[{"name":"banana"},{"name":"gova"}]
              },
              {
                "category" : "category2",
                "fruits" :[{"name":"apple"},{"name":"orange"}]
              },
              {
                "category" : "category3",
                "fruits" :[{"name":"pineapple"}]
              },
              {
              "category" : "category4",
              "fruits" :[{"name":"mongo"}]
              }
            ]
        }
  }
});

在模板中遍历数组就足够了：

<ul>
{{#each model.values as |value|}}
 <li>
 {{value.category}}
   <ul>
   {{#each value.fruits as |fruit|}}
     <li>{{fruit.name}}</li>
   {{/each}}
   </ul>
 </li>
{{/each}}
</ul>

这里是各自的Gist. Note that the only file I touched is the template.

Answer 2

如果最后的解决方案需要处理数组的数组并保持它们排序，请查看以下解决方案。我在您的模型中添加了一个名为 origin 的新字段，这样我们就有另一个字段可以排序：

  model(){
    return {
      "values" : [
      {
        "category" : "categoryD",
        "origin": "Kongo",
        "fruits" :[{"name":"banana"},{"name":"gova"}]
      },
      {
        "category" : "categoryA",
        "origin": "Italy",
        "fruits" :[{"name":"apple"},{"name":"orange"}]
      },
      {
        "category" : "categoryC",
        "origin": "Marocco",
        "fruits" :[{"name":"pineapple"}]
      },
      {
        "category" : "categoryB",
        "origin": "Brasil",
        "fruits" :[{"name":"mongo"}]
      }
    ]
  }

}

如果您想让排序字段保持动态，这就是您的控制器的外观：

import Ember from 'ember';

export default Ember.Controller.extend({

  shouldSortByCategory: true,

  values: Ember.computed.reads('model.values'),      

  valuesSortingDynamic: Ember.computed('shouldSortByCategory', function(){
     return (Ember.get(this, 'shouldSortByCategory') ? ['category:asc'] : ['origin:asc'])
  }),

  valuesSortedDynamically: Ember.computed.sort('values', 'valuesSortingDynamic'),

  actions: {
    changeSortField(){
       this.toggleProperty('shouldSortByCategory'); 
    },
  },

});

我现在不关心排序方向（asc vs desc），但我们排序的字段是动态的：category vs origin 并且是由 shouldSortByCategory 标志区分。

模板看起来几乎一样：

<ul>
{{#each valuesSortedDynamically as |value|}}
 <li>

 {{#if shouldSortByCategory}}
   <strong>{{value.category}}</strong> - {{value.origin}}
 {{else}}
   <strong>{{value.origin}}</strong> - {{value.category}}
 {{/if}}

   <ul>
   {{#each value.fruits as |fruit|}}
     <li>{{fruit.name}}</li>
   {{/each}}
   </ul>
 </li>
{{/each}}

</ul>

可在此处找到调整后的旋转：twiddle with dynamic sorting。

更新

将所有水果累积到一个数组中，保存有关它们所属类别的信息，可以按如下方式实现：

  arrayOfFruitsArray: Ember.computed('model.values.[]', function(){
    const values = this.get('model.values');
    const cumulatedfruits = Ember.A();

    values.forEach((value)=>{
      const category = Ember.get(value, 'category');
      const fruits = Ember.get(value, 'fruits');

      fruits.forEach((fruit)=>{
        fruit.category = category;
        cumulatedfruits.pushObject(fruit);
      })
    });

    return cumulatedfruits;
  })

已更新 twiddle。

如何使用“计算”方法收集子数组是新数组？

How to collect sub arrays are new Arrays using `computed` method?

arrays

ember.js

如何使用“计算”​​方法收集子数组是新数组？

How to collect sub arrays are new Arrays using `computed` method?

arrays

ember.js

如何使用“计算”方法收集子数组是新数组？