Ember Display-Modell, die Beziehung in einer Komponente hat

Question

Ich möchte meine Modelle zu einer Komponente und zeigen in einer Tabelle. Ich möchte, dass dies so modular ist, dass ich diese Komponente für andere Modelle verwenden kann.

Die Art, wie ich die Attribute gemacht habe, die eine bestimmte Beziehung haben, erscheint nicht. Das Problem, das ich herausgefunden habe, ist, dass ich das Versprechen nicht gelöst habe, als ich es ergattert habe, und nicht die Attribute mit {{ember-data}}. Ich kann nicht herausfinden einen Weg, dies zu tun ... Ich bin wirklich neu zu Ember und seine ein Problem für mich ...

UPDATE

Vor allem die unten stehenden Beschreibung zu lesen, die Sache Wenn ich das Modell in ein Array umwandeln kann, würde es reichen, denke ich. So konnte ich etwas tun:

{#each model as |item|}} 
    <tr> 
    {{#each item as |column index|}} 
    <td>{{column.[index]}} &nbsp;</td> 
    {{/each}} 
    </tr> 
{{/each}} 

ENDE UPDATE

Ich habe die folgenden zwei Modelle

// #models/inventory-summary.js 
export default DS.Model.extend({ 
    name: DS.attr('string'), 
    total: DS.attr('number'), 
    projects: DS.hasMany('inventoryProject'), //I WANT TO SHOW THIS GUY HERE 
}); 
// #models/inventory-project.js 
export default DS.Model.extend({ 
    name: DS.attr('string'), // IN PARTICULAR THIS ONE 
    summary: DS.hasMany('inventorySummary'), 
}); 

Vorlagen:

// #templates/inventory-summary.js 
// here I'm sending the model to the component and mapping the attribute to something readable 
{{model-table model=inventorySearchResult columnMap=columnMap}} 

// #templates/components/model-table.hbs 
// here is where I show the value of the model 
{{#each model_table.values as |item|}} 
    {{getItemAt item index}} 
{{/each}} 

Mein Helfer

export function getItemAt(params/*, hash*/) { 
    return params[0][params[1]]; 
} 

Und ich mache in meiner Route:

// #routes/inventory-summary.js 
model(params) { 
    let query_params = {page_size: 100}; 
    if (params.page !== undefined && params.page !== null) { 
     query_params['page'] = params.page; 
    } 
    return Ember.RSVP.hash({ 
     inventoryProject: this.get('store').findAll('inventoryProject'), 
     inventorySummary: this.get('store').query('inventorySummary', query_params), 
    }); 
}, 
setupController(controller, models) { 
    this._super(...arguments); 
    controller.set('projects', models.inventoryProject); 
    controller.set('inventorySearchResult', models.inventorySummary); 
    let columnMap = [ 
     ['name', 'Name ID',], 
     ['total', 'Total'], 
     ['projects', 'Project', {'property': 'name', 'has_many': true}] 
    ]; 
    controller.set('columnMap', columnMap); 
}, 

Schließlich ist dies der Teil des Codes, der wirklich Schritte völlig daneben ist, das ist, wo ich auf die Vorlage Ich versuche, die Werte vorbei

// #components/model-table.js 
getValueForColumn(values, params) { 
    if (values.length > 0) { 
     if (typeof values[0] === "object") { 
      return this.getResolved(values, params); 
     } else { 
      return values; 
     } 
    } 
    return values; 
}, 
getResolved(promise, params) { 
    let result = []; 
    promise.forEach((data) => { 
     data.then((resolved) => { 
      let tmp = ""; 
      resolved.forEach((item) => { 
       console.log(item.get(property)); // THIS GUY SHOWS UP LATER 
       tmp += item.get(property) + ", "; 
      }); 
      result.push(tmp); 
     }); 
    }); 
    return result; // THIS GUY RETURN AS EMPTY! 
}, 
didReceiveAttrs() { 
    this._super(...arguments); 
    let model = this.get('model'); 
    let columnMap = this.get('columnMap'); 
    for (var i = 0; i < columnMap.length; i++) { 
     attributes.push(columnMap[i][0]); 
     columns.push({'name': columnMap[i][1], 'checked': true}); 
     values.push(this.getValueForColumn(model.getEach(columnMap[i][0]), columnMap[i][2])); //WRONG HERE 
    } 
    this.set('model_table', {}); 
    let model_table = this.get('model_table'); 
    Ember.set(model_table, 'values', values); 
}, 

zu zeigen, ich bin in der Lage in der Vorlage zu zeigen, wenn ich tun, ein paar, wenn die in der Start {{template}}, weil ich glaube, dass die Vorlage tut eine Art von Bindung ich nicht tue, und es löst später, aber es war wirklich hässlich und böse. Ich wollte etwas sauberer machen ... deshalb poste ich hier.

Answer 1

Verschieben Sie Ihre API-Aufrufe zu AfterModel. und versuchen Sie etwas wie das, wo Sie warten, bis Versprechen zu lösen und setzen Sie es.

afterModel: function() { 
var rsvp = Ember.RSVP.hash({ 
    obj1: Ember.$.getJSON("/api/obj1"), 
    obj2: Ember.$.getJSON("/api/obj2"), 
}); 
var ret = rsvp.then(function (resolve) { 
    console.log("Something" + resolve.obj1); 
    self.set('obj2', resolve.obj2); 

}); 
return ret; 

}

setupController: function (controller, model) { 
this._super(controller, model); 
controller.set('obj1', this.get('obj1')); 
controller.set('obj2, this.get('obj2')); 

}