ember.js:使用路由、模板和导出来渲染模型数据

Question

我在这里绕圈子，试图将所有组件拉到一起以产生所需的 View 。我觉得好像我只需要调整表盘即可将其全部聚焦，但此刻它暗示了我。

我有两个模型 - Person 和 Address - 我为它们创建了两个模板；然后我想在另一个“主”模板中呈现这两个模板。目前我不会以任何方式链接它们(最终 1 个人会有很多嵌套地址)，因为我想先了解一般原理。

这两个模板使用 App.Router.map 单独工作

this.resource('listOfPeopleTemplate', { path: '/' });

要么

this.resource('listOfAddressesTemplate', { path: '/' });

但不是一起或当我添加 mainViewTemplate 并尝试将两者都添加到其中时:

App.Router.map(function () {


  //this.resource('listOfAddressesTemplate', { path: '/' });
  //this.resource('listOfPeopleTemplate', { path: '/' });
  this.resource('mainViewTemplate', { path: '/' });
 });

问题似乎集中在:

App.MainViewTemplateRoute = Ember.Route.extend({   
    renderTemplate: function() {    
        this.render('listOfPeopleTemplate', {into: 'mainViewTemplate', outlet: 'peops'});
        this.render('listOfAddressesTemplate', {into: 'mainViewTemplate', outlet: 'address'});
    }  
});

返回的错误是“已指定导出(人员)但未找到”；和“#each 循环的值必须是一个数组......”。我可以看到我可能需要对地址和人员的 Controller 做一些事情，但我不知道是什么。事实是，我让自己陷入了这样的困境，我现在甚至无法使最初成功的版本正常工作(地址或人员显示在他们自己的模板中)。

我做了以下 fiddle http://jsfiddle.net/4gQYs/4/ .请把我的注意力集中起来!

Answer 1

我希望我理解你的问题!

我有两条路线人 和 名额 .

App.Router.map(function(){
    this.resource('people');
    this.resource('places');

});  

我正在为人员路线的模型 Hook 中的 Controller 加载模型。

App.PeopleRoute=Ember.Route.extend({
    model:function(){
        var places=Em.A();
        $.getJSON("js/places.js").then(function(json){places.setObjects(json)});

        var placesController=this.generateController('places',places);
        placesController.set('content',places);

        var people=Em.A();
        $.getJSON("js/people.js").then(function(json){people.setObjects(json)});
        return people;
    },

    renderTemplate:function(){
        this.render('people',{into:"application",outlet:"people"});
        this.render('places',{into:"application",outlet:"places"});
    }
});

以下是不需要的。在显示一些相关数据时可能有用。

App.PeopleController=Ember.ArrayController.extend({
    needs:'places'
});

现在我在主应用程序模板中渲染这两个模板。

<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet people}}
    {{outlet places}}
  </script>

  <script type="text/x-handlebars" data-template-name="people">

    {{#each controller}}
        <p>{{name}}</p>
    {{/each}}
  </script>

  <script type="text/x-handlebars" data-template-name="places">

    {{#each controller}}
        <p>{{name}}</p>
    {{/each}}
  </script>