Ember.js 为多个网点加载模型

Question

我想创建一个类似 UI 的仪表板。出于这个原因，我想在一个页面上呈现多个模板及其各自的模型。

我想，我可以使用 {{render}} 助手解决这个问题（请参阅http://emberjs.com/guides/templates/rendering-with-helpers/#toc_the-code-render-code-helper）

我已经渲染了模板，但其中没有数据。 您可以在 JsBin 上查看问题的最小示例：http://jsbin.com/vasezutoxege/2/edit?html,css,js,output

JsBin的一些sn-ps与这里的问题直接相关：

App.Router.map(function() {
    this.resource('contacts', function() {
        this.resource('contact', { path: ':contact_id'});
    });
    this.resource('records', function() {
        this.resource('record', { path: ':record_id'});
    });
});

对于每个路由器，我都有一个模型和一个模板。然后我想在我的应用程序的索引路由中显示路由：

<script type="text/x-handlebars" data-template-name="index">
  <!-- link to contacts route is showing contacts template with model right -->
  {{#link-to "contacts"}}Link to contacts route{{/link-to}}
  <!-- this loads the template but without data -->
  <div class="template">
    {{render "contacts" contacts}}
  </div>

  ...

</script>

如何在插座中呈现完整的模板及其模型数据？

感谢您的宝贵时间！

Answer 1

你见过http://discuss.emberjs.com/t/dashboard-type-views/5187吗？

在那篇文章中，有多种解决方法的建议。下面的代码似乎可以工作

App.IndexRoute = Ember.Route.extend({
   model: function() {
     return Ember.RSVP.hash({
        contacts: this.store.find('contacts'),
        records: this.store.find('records'),
     });
   },

  setupController: function (controller, context) {
    this.controllerFor('contacts').set('model', context.contacts);
    this.controllerFor('records').set('model', context.records);
  }
});

但是您没有使用 Ember-Data，所以我重新排列它以使用静态数组。这是我的解决方案，仅更改了 javascript。 http://jsbin.com/vasezutoxege/4/edit（它需要小幅更新以满足您的所有需求，尤其是 renderTemplate 中的更多更改）

App.IndexRoute = Ember.Route.extend({    
      setupController: function (controller, context) {
        this.controllerFor('contacts').set('model', CONTACTS);
        this.controllerFor('records').set('model', RECORDS);
      },
    renderTemplate: function() {
        // Render default outlet   
        this.render();
        // render extra outlets
        this.render("records", {
            outlet: "rec",
            into: "index" // important when using at root level
        });
    }  
});
App.IndexController = Ember.ObjectController.extend({
    needs: ['contacts', 'records'] 
});
App.ContactsController = Ember.ArrayController.extend();
App.RecordsController = Ember.ArrayController.extend();