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 #preight 使用服务器中的数据呈现预算模板。
myapp.html＃expenses 使用服务器中的数据呈现费用模板。

我现在遇到的问题是，我想在一个页面上显示两个模板及其数据（索引页面）。我已经为此尝试了两种解决方案：

解决方案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 个答案: