灰燼：將模型數據從嵌套路由記錄到模板中

Question

我有一個嵌套的路由，它根據單擊的項目顯示數據對象。 在Ember中，當我從列表中選擇一個項目時，是否有一種方法可以將數據記錄在該嵌套路線的模板中？

我只是最近才開始使用Ember，但是我找不到在哪里問這個問題。 這是一個小提琴，在這里可以使用把手顯示數據並調用object屬性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

正確的方式

最好的方法是安裝用於調試目的的chrome / firefox擴展程序（稱為ember inspector 。 一旦安裝了插件，您只需轉到users.show Ember -> View Tree ，您將在其中找到具有相應控制器的users.show行。 單擊它，然后單擊“ Own properties選項卡中model屬性旁邊的$E 該對象將被記錄到控制台。

參見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'
});  

在解析路由model屬性中的promise后，將調用afterModel 。 您可以確保ajax請求已完成（在使用restadapter的情況下），並且可以看到包含所有相應數據的對象。

請注意，您不應將其放入model而不afterModel其放入afterModel 。 一點擊鏈接，您將直接將模型傳遞給路線。

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

在這種情況下，不執行該model 。