Ember.js：在同一頁面/路由中顯示多個數據庫支持的資源/模型？

Question

我正在以預算經理的形式使用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 #prevention使用服務器中的數據呈現預算模板。
myapp.html＃expensess使用來自服務器的數據呈現費用模板。

我現在遇到的問題是我想在一個頁面 （索引頁面） 上顯示兩個模板及其數據 。 我為此嘗試了兩種解決方案：

解決方案1 ：擁有單獨的路徑和模板，並在主應用程序模板中調用{{render budget}}和{{render expenses}}。 這會渲染兩個模板，但沒有任何數據。
解決方案2 ：只有一個IndexRoute並從其模型屬性返回預算和費用，將它們呈現為索引模板。 這或多或少都有效，但似乎與Ember相反，不同的資源，路線和控制器分離得很好。

有什么想法嗎？ 我已經完成了五六個教程和Ember的官方指南，但沒有一個明確說明如何組裝一個單頁的Web應用程序，其中包含多個資源支持的多個模板，而無需鏈接到不同的頁面/路由。

Answer 1

您可以使用Ember.RSVP.hash在單個對象中加載多個模型：

App.IndexRoute = Ember.Route.extend({
    model: function()
    {
        return Ember.RSVP.hash({
            expenses: this.store.find('expense'),
            budget: this.store.find('budget', 1)
        })
    }
});

在模板中，您可以通過密鑰訪問每個已解析的承諾：

{{expenses}}將返回this.store.find('expense')承諾的結果， {{budget}}結果來自this.store.find('budget', 1)承諾。

因此，在您的索引模板中，您將能夠：

<script type="text/x-handlebars" id="index">
    {{render "expenses" expenses}}
    {{render "budget" budget}}
</script>

Ember.js：在同一頁面/路由中顯示多個數據庫支持的資源/模型？

問題描述

1 個解決方案

解決方案1
11 已采納 2013-11-14 11:27:32

Ember.js：在同一頁面/路由中顯示多個數據庫支持的資源/模型？

問題描述

1 個解決方案

解決方案1 11 已采納 2013-11-14 11:27:32

解決方案1
11 已采納 2013-11-14 11:27:32