Modifier les données avant le rendu

Question

Quelle est la bonne façon de changer les données avant de rendre un modèle dans l'exemple ci-dessous?

model() de mon itinéraire:

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

Puis, dans mon modèle:

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

Et enfin, dans mon élément, je voudrais changer quelque chose dans les villes, donc je créé objet calculé en de cette façon:

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

Mais this.get('cities') retourne quelque chose comme ceci: Class {modelName: "city", query: Object, store: Class, manager: RecordArrayManager…} au lieu de données. Est-ce que quelqu'un sait quelque chose de façon cool d'obtenir des données pures de this.get('cities')? Toute aide serait appréciée.

Answer 1

Cela devrait fonctionner:

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

L'important ici est que cities est un tableau de Ember d'objets de données Ember. Ils ne sont pas des objets JS ordinaires, donc vous devez utiliser Ember.get(obj, 'prop') ou obj.get('prop') au lieu de obj.prop!

Answer 2

vous pouvez toujours utiliser toJSON() comme si ... this.get('cities').toJSON() villes est un tableau de DS.model, si vous voulez un POJO, vous devez convertir.

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