mardi 26 mai 2015

Ember: Properly using store within component

Relevant info: Ember 1.11.1 Ember Data 1.0.0-beta.16 Ember CLI

I am attempting to make a reusable component for metrics within my application. From within the component, it runs the query with the selected options. The problem is, even though I see the network request kick off properly, it is never getting entered into the Ember object.

Here is my component code:

import Ember from 'ember';

var arr = Ember.ArrayProxy.extend(Ember.PromiseProxyMixin);

export default Ember.Component.extend({
store: Ember.inject.service(),
type: null,
startTime: null,
finishTime: null,
interval: 0,
detail: false,

didInsertElement: function() {
    // Ensure we have the latest metric types
    this.set('metricTypes', arr.create({
        promise: this.get('store').find('metric-type')
    }));
},

data: function() {
    var results = this.metricQuery();
    return results;
}.property(),


/* NOT PROPERTIES */

metricQuery: function() {
    return this.get('store')
               .find('metric-query', { type: this.get('type'),
                                       startTime: this.get('startTime'),
                                       finishTime: this.get('finishTime'),
                                       interval: this.get('interval'),
                                       detail: this.get('detail') });
}
});

I am seeing the metricTypes return and get set to an Ember object correctly. But when the metricQuery function runs, the object does not get set. I see the property in the inspector, but there is no content. I do however see the network request go out correctly with the correct data, and sideloaded data, returned:

{"metricQuery":{
    "id":"00000000-0000-0000-0000-000000000000",
    "metricType":["c47707e1-a9d1-420a-87b6-4e65b77e6a58"],
    "metricResult":"1035be30-cf6e-4425-ac58-d0e2fd2cf7b1"},

"metricResult":{... data... }

"metricType":[{.... data....}]}

But when I look at the object in the Ember inspector, I see empty content. This is the first time I've tried to use the store to fetch data from within a component, and I'm not sure what I'm doing wrong.

How can I access the data that is being returned from the find on metricQuery?

Thanks in advance for any help.




Aucun commentaire:

Enregistrer un commentaire