Question

我在这里转圈，尝试将所有组件拉到一起以产生所需的视图。我觉得好像我只需要调整一下表盘就能完全集中注意力，但此刻它让我很开心。

我有两个模型 - 人物和地址 - 我为其创建了两个模板;然后我想将这两个模板渲染到另一个主要的＆＃39;模板。目前我还没有将它们链接起来（最终有一个人会有很多嵌套地址），因为我想先了解一般原理。

这两个模板使用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'});
    }  
});

返回的错误是＆＃34;出口（人）已指定但未找到＆＃34 ;;和＃34; #each循环的值必须是一个数组..＆＃34;。我可以看到我可能需要对地址和人员的控制器做一些事情，但我不知道是什么。事实上，我已经陷入了这样的困境，我现在甚至无法使原来成功的版本工作（地址或人员都显示在他们自己的模板中）。

我做了以下小提琴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>

ember.js：使用路线，模板和出口来渲染模型数据

1 个答案: