渲染前修改数据

Question

在下面的示例中呈现模板之前更改数据的正确方法是什么？

model() 来自我的路线：

  model({contractId}){
    const cities = this.store.query('city', {contractId});
    return Ember.RSVP.hash({ cities});
  }

然后在我的模板中：

{{orders/order-form cities=model.cities}}

最后，在我的组件中，我想改变城市中的一些东西，所以我以这种方式创建了计算对象：

 cityOptions: Ember.computed('cities', function(){
    return this.get('cities').map((data)=> ({key: data.id, value: data.name}));
  }),

但是 this.get('cities') 返回的是这样的东西：Class {modelName: "city", query: Object, store: Class, manager: RecordArrayManager…} 而不是数据。有谁知道从 this.get('cities') 获取纯数据的好方法吗？任何帮助将不胜感激。

Answer 1

你总是可以像这样使用 toJSON()... this.get('cities').toJSON() cities是DS.model的数组，如果要POJO，需要转换

cityOptions: Ember.computed('cities', function(){ return 
  this.get('cities').map((aModel)=> ( 
     return aModel.toJSON().map((data)=> (
         return {key: data.id, value: data.name})) 
     )); 
}),

Answer 2

这应该有效：

import Ember from 'ember';

const {get} = Ember;

export default Ember.Component.extend({

  cityOptions: Ember.computed('cities.@each.name', 'cities.@each.id', function(){
    return this.get('cities').map((city) => ({
      key: get(city, 'id'),
      value: get(city, 'name'),
    }));
  }),
});

这里重要的是，cities 是 ember 数据对象的 ember 数组。它们不是普通的普通 JS 对象，所以你必须使用 Ember.get(obj, 'prop') 或 obj.get('prop') 而不是 obj.prop!

渲染前修改数据

Modify data before render

javascript

ember.js

ember-data