Ember：从嵌套路径中记录模板中的模型数据

Question

我有一个嵌套路线，它根据点击的项目显示数据对象。在Ember中，当我从列表中选择一个项目时，有没有办法在这个嵌套路径的模板中记录数据？

我最近才开始和Ember合作，但我还没有找到这个问题。这是一个小提琴，我可以使用把手显示数据并调用对象属性nae，但如何在整个模板中将整个对象记录到控制台？

http://jsfiddle.net/jwevfhzL/

这是我的JS和模板：

JS：

App = Ember.Application.create();

App.ApplicationAdapter = DS.FixtureAdapter.extend();

App.User = DS.Model.extend({
  firstName: DS.attr('string'),
  lastName: DS.attr('string'),
  fullName: function() {
  return this.get('firstName') + ' ' + this.get('lastName');
  }.property('firstName', 'lastName')
});

App.User.FIXTURES = [
  {
    id: 1,
    firstName: 'Luke',
    lastName: 'Skywalker'
  },
  {
    id: 2,
    firstName: 'Frodo',
    lastName: 'Baggins'
  }
];

App.Router.map(function() {
  this.resource('users', {path: '/'}, function() {
    this.route('show', {path: ':user_id'});
  });
});

App.UsersRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('user');
  }
});

App.UsersShowRoute = Ember.Route.extend({
  model: function(params){
    return this.store.find('user', params.user_id);
  },
  templateName: 'show'
});

模板：

<script type="text/x-handlebars">
  {{outlet}}
</script>


<script type="text/x-handlebars" id="users">
  <p>List of Users</p>
  <ul>
    {{#each}}
      <li>
        {{#link-to 'users.show' this}}
          {{firstName}}
        {{/link-to}}
      </li>
    {{/each}}
  </ul>

  {{outlet}}
</script>

<script type="text/x-handlebars" id="show">
  <h3>How do I log the contents of the object in this view?</h3>
  <p>First Name = {{firstName}}</p>
  <p>Last Name = {{lastName}}</p>
  <p>Full Name = {{fullName}}</p>
</script>

Answer 1

正确的方式

最好的方法是安装名为ember inspector的chrome / firefox扩展程序以进行调试。安装好插件后，只需转到Ember -> View Tree，您应该在其中找到带有相应控制器的行users.show。点击它，然后点击$E标签内model媒体资源旁边的Own properties。该对象将被记录到控制台。

请参阅https://github.com/emberjs/ember-inspector

另一种方式

如果您想手动将对象记录到控制台，可以在所选路线上使用afterModel或setupController。

App.UsersShowRoute = Ember.Route.extend({
  model: function(params){
    return this.store.find('user', params.user_id);
  },
  afterModel: function(model) {
    console.log(model);
  },
  templateName: 'show'
});  

在解决路由afterModel属性的承诺后调用model。您可以保证ajax请求已完成（如果使用了restadapter），您可以使用所有相应的数据查看您的对象。

请注意，您不应将其放入model而不是afterModel。当您点击链接时，您将直接将模型传递给路线。

{{#link-to 'users.show' this}}

在这种情况下不执行model。