ember.js，如何在頁面加載後顯示數據？

Question

我在emberjs中真的很新，但我真的很想了解它。 我正在用ember和ember-data構建一個webapp。

所以，問題如下。我有一個頁面（用戶），應該顯示在models/users.js中定義的所有對象用戶。現在，據我瞭解emberjs，頁面等待答案（在我的情況下rest api）之前加載的任何數據在{{出口}}，我想知道是否有可能加載頁面和（圖像， CSS等），他們顯示的數據？

==my users.hbs 
{{#each user in controller}} 
<li>{{user.name}} - {{user.email}}</li> 
{{else}} 
<li>no users… :-(</li> 
{{/each}} 

==usersRoute.js 
    App.UsersRoute = Ember.Route.extend({ 
    model: function(){ 
     return $.getJSON('/REST_API/users').then(function(data){ 
      return data.body; 
     }); 
    } 
}); 

==usersController.js 
App.UsersController = Ember.ArrayController.extend({ 
    sortProperties: ['name'], 
    sortAscending: true // false = descending 
}); 

==user.js (model) 
App.User = DS.Model.extend({ 
    name   : DS.attr(), 
    email  : DS.attr() 
}); 

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

==router 
App.Router.map(function(){ 
    this.resource('users', function(){ 
     this.resource('user', { path:'/:user_id' }, function(){ 
      this.route('edit'); 
     }); 
     this.route('create'); 
    }); 
}); 

什麼IM想要做的就是在獲取數據加載頁面，然後把我的控制器

謝謝。

Answer 1

model方法會阻止渲染，直到promise解決。您可以使用setupController以便模板呈現，並且當從Ajax中提取數據時，each將重新渲染，因爲我們使用controller.set('model', data.body);進行設置。

usersRoute.js

App.UsersRoute = Ember.Route.extend({ 
    setupController: function(controller){ 
     $.getJSON('/REST_API/users').then(function(data){ 
      // ajax callback is detached from runloop, so we attach again 
      Ember.run(function() { 
       controller.set('model', data.body); 
      });    
     }); 
    } 
}); 

users.hbs

{{#each user in model}} 
<li>{{user.name}} - {{user.email}}</li> 
{{else}} 
<li>no users… :-(</li> 
{{/each}}