EmberJS 2.7 如何 restructure/reformat/customize 从商店返回数据

Question

我有一个我认为非常简单的问题，但我只是不知道如何进行这种数据操作。 This 遗憾的是没有帮助，即使我在 Ember 中感受到同样的痛苦。

这是一条路线：

route/dashboard.js:

import Ember from 'ember';

export default Ember.Route.extend({
    // this is for testing, normally we get the data from the store
    model: function() {
        return this.get('modelTestData');
    },

    modelTestData: [{
        name: 'gear',
        colorByPoint: true,
        data: [
            {y: 10, name: 'Test1'},
            {y: 12, name: 'Test2'},
            {y: 40, name: 'Test3'}
            ]
    }],

});

'modelTestData' 对象的结构必须完全相同，因为它被传递到需要以这种方式构建的子组件。

我可以轻松地从 API 中获取数据并将其放入模型中：

model: function() {
    return this.store.get('category');
},

但我需要对其进行重组...但是如何？

我必须以某种方式遍历类别集合并从每条记录中提取部分数据以替换 modelTestData 对象的 'data' 部分。

所以我有 3 个问题完全被难住了：

如何从模型中'get at'我需要的属性？
如何将它们构造为具有 'y' 和 'name' 的对象数组？
如何将该结构分配给 modelTestData 的 'data' 属性而不是硬编码？

类别是一个 JSONAPI 对象，如下所示：

{
   "data":[
      {
         "id":"1",
         "type":"categories",
         "attributes":{
            "name":"Carrying system",
            "total-grams":"0.0"
         }
      },
      {
         "id":"2",
         "type":"categories",
         "attributes":{
            "name":"Shelter system",
            "total-grams":"0.0"
         }
      }
   ]
}

我需要将克值映射到 'y' 并将名称映射到 modelTestData 中的 'name'。

请注意，类别数据在其他路由中用于其他目的，与 API 返回的完全相同。所以我不想更改模型结构本身，或者 API returns... 这会破坏应用程序的其他部分，这些部分确实在其原始结构中使用了 'category'。

这是一个特定的用例，此路由需要根据 modelTestData 的结构将数据传递给子组件。

我也想知道这个数据操作任务是否属于路由？

我是否应该以某种方式在 serliazer 适配器中执行此操作，创建一个新结构，如 'categoryWeights' 这样我就可以执行：

model: function() {
    return this.store.get('categoryWeights');
},

编辑

我已经设法在路线中做到这一点，但它只是给了我一个对象数组。我需要一个包含 2 个属性和一个嵌入式对象数组的对象。

   model() {
    return this.store.findAll('category')
        .then(categories => categories.map(category => {
            let data = {
                y: category.get('totalGrams'),
                name: category.get('name')
            };
            return data;
        }))
    },

Answer 1

好的，我让它在路线中工作。

model() {
return this.store.findAll('category')
    .then( function(categories) {
        let data = [];
        data = categories.map(category => {
            return {
                y: category.get('totalGrams'),
                name: category.get('name')
                }
            });
        return [{name: 'gear', colorByPoint: true, data}];
    })
},

我仍然觉得这应该在适配器或序列化程序中完成。很高兴看到说明如何做到这一点的答案。

Answer 2

这可能应该进入计算属性:

dataForSubModel: Ember.computed('model.@each.totalGrams', 'model.@each.name', {
  get() {
    return [{name: 'gear', colorByPoint: true, this.get('model').map(m => ({y:m.get('totalGrams'), name:m.get('name')}))}
  }
}),

序列化器是错误的地方，因为它不是你需要在服务器和你的应用程序之间转换它，而是在你的应用程序和一个奇怪的组件之间。其实最好的办法就是重构组件。

EmberJS 2.7 如何 restructure/reformat/customize 从商店返回数据

EmberJS 2.7 How to restructure/reformat/customize data returned from the store

json

ember.js

data-structures

ember-data

ember-router