ember.js：使用路径，模板和插座来渲染模型数据

Question

我在这里绕圈，尝试将所有组件拉到一起以产生所需的视图。我觉得好像我只需要调整表盘就可以把所有的焦点都集中在一起，但是现在它就包括我在内。

我有两个模型 - 人员和地址 - 我已经创建了两个模板;然后我想在另一个“主”模板中渲染这两个模板。目前我还没有将它们连接起来（最终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循环的值必须是数组..”。我可以看到，我可能需要为地址和人员的控制器做些事情，但我不知道是什么。事实是，我已经陷入了这样的混乱状态，我现在甚至无法获得最初的成功版本（地址或人员显示在他们自己的模板中）。

我做了以下小提琴http://jsfiddle.net/4gQYs/4/。请把我带入焦点！

Answer 1

我希望我能理解你的问题！

我有两条路线人和地方。

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

}); 

我加载模型的两个控制器模型钩人民路线。

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>