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