2016-09-29 9 views
0

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

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

UPDATE

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

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

КОНЕЦ UPDATE

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

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

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

ответ

0

переместите ваши вызовы 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')); 

}

+0

Кажется лучше, чем при использовании Ember.observer(). Я посмотрю на это и скоро вернусь ... – mk2

+0

На самом деле это не работает для меня, потому что для компонентов, которые я использую, нет afterModel(). Я передаю результат в шаблоне в 'model = inventorySearchResult' – mk2

+0

Вы можете сделать то же самое в модели(), также я думаю. – Sandeep