Блог

Я хочу предоставить свои модели одному компоненту и показать в одной таблице. Я хочу, чтобы это было модульным, чтобы я мог использовать этот компонент для других моделей.

То, как я сделал, атрибуты, которые имеют определенные отношения, не отображаются. Проблема, которую я обнаружил, заключается в том, что к тому времени, когда я ее получаю, обещание не было выполнено, и я не получаю атрибуты, используя {{ember-data}} . Я не могу понять один из способов сделать это… Я действительно новичок в ember, и это было проблемой для меня…

Обновить

Прежде чем читать все описание ниже, дело в том, что, если я смогу преобразовать модель в один массив, этого будет достаточно, я думаю. Итак, я мог бы сделать что-то вроде этого:

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

ЗАВЕРШЕНИЕ ОБНОВЛЕНИЯ

У меня есть следующие две модели

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

Шаблоны:

 // #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}}
  

Мой помощник

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

И в моем маршруте я делаю:

 // #routes/inventory-summary.js
model(params) {
    let query_params = {page_size: 100};
    if (params.page !== undefined amp;amp; 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);
},
  

Наконец, это та часть кода, которая действительно запутана, и именно здесь я передаю шаблону значения, которые я пытаюсь показать

 // #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 resu< // 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);
 },
  

Я могу показать в шаблоне, если начну выполнять кучу if в {{template}}, потому что я считаю, что шаблон выполняет какую-то привязку, которую я не выполняю, и она разрешается позже, но это было действительно уродливо и неприятно. Я хотел сделать что-то более чистое… вот почему я публикую здесь.

переместите свои вызовы api в afterModel. и попробуйте что-то подобное, где вы ждете, пока обещание разрешится, и установите его.

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

}