2

我正在使用 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：拥有单独的路由和模板，并在主应用程序模板中调用 {{render budget}} 和 {{render costs}}。这会呈现两个模板，但没有任何数据。

  • 解决方案 2：只有一个 IndexRoute 并从其模型属性中返回预算和费用，将它们呈现到索引模板中。这或多或少有效，但似乎与 Ember 对不同资源、路由和控制器的良好分离相反。

有什么想法吗？我已经阅读了五六个教程和 Ember 的官方指南，但没有一个明确说明如何使用由多个资源支持的多个模板组装一个单页 Web 应用程序，而无需链接到不同的页面/路线。

4

1 回答 1

11

您可以使用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')promise{{budget}}的结果和 promise 的结果this.store.find('budget', 1)。

因此，在您的索引模板中，您将能够：

<script type="text/x-handlebars" id="index">
    {{render "expenses" expenses}}
    {{render "budget" budget}}
</script>
于 2013-11-14T11:27:32.753 回答