Javascript Ember.js：在同一页面/路径中显示多个数据库支持的资源/模型？_Javascript_Ember.js

Javascript Ember.js：在同一页面/路径中显示多个数据库支持的资源/模型？

javascript ember.js

Javascript Ember.js：在同一页面/路径中显示多个数据库支持的资源/模型？,javascript,ember.js,Javascript,Ember.js,我正在使用Ember以预算管理器的形式编写一个小型测试应用程序。我有一个预算对象，它包含一般属性，如每月限额和说明。我还有一组Expense对象，其中包含名称、花费金额等。这两个对象都是使用Ember Data的REST适配器从服务器检索的 HTML: <body> <script type="text/x-handlebars" data-template-name="budget"> <h2>{{name}} (€ {{amount}})&

我正在使用Ember以预算管理器的形式编写一个小型测试应用程序。我有一个预算对象，它包含一般属性，如每月限额和说明。我还有一组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>

按照我在所有Ember教程中看到的架构，有一个ExpensesRoute，其中费用列表作为其模型，以及一个BudgetRoute，其中所选预算作为其模型。只要我通过正确的URL查看每个资源，这就非常有效：

myapp.html#budget使用来自服务器的数据呈现预算模板
myapp.html#expenses使用来自服务器的数据呈现费用模板

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

解决方案1：拥有单独的路由和模板，并在主应用程序模板中调用{{render budget}}和{{render expenses}}。这将呈现两个模板，但没有任何数据
解决方案2：只需一个IndexRoute，并从其模型属性返回预算和费用，将它们呈现到索引模板中。这或多或少是可行的，但似乎与Ember对不同资源、路由和控制器的良好分离背道而驰

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

您可以使用

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返回结果，并从

this.store.find（'budget'，1）

promise返回结果

因此，在索引模板中，您可以执行以下操作：

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


{{提供“费用”费用}
{{呈现“预算”预算}

非常有效，谢谢！你会认为这是做这件事的经典方式吗？奇怪的是，我在指南中的任何地方都没有遇到Ember.RSVP，但我尝试做的事情似乎在很多web应用程序中都很常见。不客气！是的，根据我的经验，这是最好的方法。RSVP是用于ember的promises api，您可以找到一些文档。我认为你的问题应该出现在现实中，就像你说的，这是一个普遍的问题。@KennyderieMaker你和我都有同样的挫折感。相当常见的现实世界应用程序模式在指南或博客圈中似乎几乎没有示例材料。惯用的解决方案似乎总是隐藏在API中的某种晦涩（对新用户来说）方法。这些指南过于零碎，在很多时候都没有用处。每次我开始使用Ember应用程序时，我几乎不需要任何时间就可以达到这样一个点：架构的深度超过了指南中的深度水平，然后就开始堆叠溢出（stackoverflow）。“…没有人明确说明如何在不链接到不同页面/路径的情况下，使用多个资源支持的多个模板组装一个单页web应用程序。”你已经一针见血了。

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