私は、Ember を使用して、予算マネージャーの形で小さなテスト アプリを作成しています。毎月の制限や説明などの一般的なプロパティを含む Budget オブジェクトがあります。また、名前や支出額などを含む Expense オブジェクトのセットもあります。どちらも、Ember Data の REST アダプターを使用してサーバーから取得されます。
HTML:
<body>
<script type="text/x-handlebars" data-template-name="budget">
<h2>{{name}} (€ {{amount}})</h2>
</script>
<script type="text/x-handlebars" data-template-name="expenses">
<ul id="expense-list">
{{#each model}}
{{render "expense" this}}
{{/each}}
</ul>
</script>
<!-- expense template -->
<script type="text/x-handlebars" id="expense">
<li>
<label>{{description}}</label>
<label class="subtle">{{formatDate time}}</label>
<label class="amount">{{amount}}</label>
</li>
</script>
</body>
</html>
JavaScript :
window.App = Ember.Application.create();
App.ApplicationAdapter = DS.RESTAdapter.extend({
host: 'http://localhost:5000',
namespace: 'outthepocket/api'
});
// Model
App.Expense = DS.Model.extend({
amount: DS.attr('number'),
description: DS.attr('string'),
time: DS.attr('date')
});
App.Budget = DS.Model.extend({
name: DS.attr('string'),
amount: DS.attr('number')
});
// Routes
App.Router.map( function() {
this.resource('budget');
this.resource('expenses');
});
App.ExpensesRoute = Ember.Route.extend({
model: function()
{
return this.store.find('expense');
}
});
App.BudgetRoute = Ember.Route.extend({
model: function()
{
return this.store.find('budget', 1);
}
});
すべての Ember チュートリアルで見られるアーキテクチャに従って、経費のリストをモデルとする ExpensesRoute と、選択した予算をモデルとする BudgetRoute があります。これは、適切な URL にアクセスして各リソースを表示する限り、うまく機能します。
- myapp.html#budgetは、サーバーからのデータを使用して予算テンプレートをレンダリングします。
- myapp.html#expensesは、サーバーからのデータを使用して経費テンプレートをレンダリングします。
私が今抱えている問題は、両方のテンプレートとそのデータを 1 つのページ(インデックス ページ) に表示したいということです。私はこれに対して2つの解決策を試しました：
解決策 1 : 別のルートとテンプレートを用意し、メイン アプリケーション テンプレートで {{render Budget}} と {{renderexpensed}} を呼び出します。これにより、両方のテンプレートがレンダリングされますが、データはありません。
解決策 2 : IndexRoute だけを用意し、そのモデル プロパティから予算と経費の両方を返し、それらをインデックス テンプレートにレンダリングします。これは多かれ少なかれ機能しますが、Ember のさまざまなリソース、ルート、およびコントローラーの適切な分離に反するようです。
何かご意見は？私は 5 つか 6 つのチュートリアルと Ember の公式ガイドを見てきましたが、それらのどれも、異なるページ/ルートにリンクすることなく、複数のリソースに支えられた複数のテンプレートを使用して 1 ページの Web アプリを組み立てる方法を明確にしていませんでした。