2

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

我有两个模型——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'});
    }  
});

返回的错误是“outlet (people) is specified but not found”；和“#each 循环的值必须是一个数组......”。我可以看到我可能需要对地址和人员的控制器做一些事情，但我不知道是什么。事实是，我让自己陷入了如此混乱，我现在甚至无法让最初成功的版本正常工作（地址或人员显示在他们自己的模板中）。

我做了以下小提琴http://jsfiddle.net/4gQYs/4/。请让我集中注意力！

4

1 回答 1

3

我希望我理解你的问题！

我有两条路线人和地方。

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>
于 2013-08-19T19:16:14.650 回答