私のモデルを1つのコンポーネントに公開し、1つのテーブルに表示したいと考えています。このコンポーネントを他のモデルに使用できるように、これをモジュラー化したいと思っています。1つのコンポーネントに関連性があるEmber表示モデル
特定の関係を持つ属性を行った方法は表示されません。私が見つけた問題は、私がそれをつかむときに約束が解決されず、{{ember-data}}を使って属性を取得していないからです。私は、以下のすべての説明を読む前に事をそれを行うのいずれかの方法を考え出す...私はエンバーは本当に新しいですし、その私のために問題になって...
UPDATE
カント私がモデルを1つの配列に変換できれば十分だろうと私は思う。だから、私はこのような何か行うことができます:UPDATE OF
{#each model as |item|}}
<tr>
{{#each item as |column index|}}
<td>{{column.[index]}} </td>
{{/each}}
</tr>
{{/each}}
ENDを
I持って、次の二つのモデル
// #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);
},
を表示する場合での{{テンプレート}}、私はテンプレートが、私はやっておりませんし、それが解決結合のいくつかの種類がありません信じているから後で、それは本当に醜いと厄介だった。私は何かクリーンなものをしたいと思っていたので、ここに投稿しています。
はEmber.observer()を使用するよりも良さそうです。私はそれを見て、すぐにリターンを与えるでしょう... – mk2
実際には私が使用しているコンポーネントのafterModel()がないので、これは私のためには機能しません。 'model = inventorySearchResult'のテンプレートに結果を渡します – mk2
model()でも同じことができます。 – Sandeep