2013-05-03 52 views
0

我有一個非常簡單的要求,但像Ember.JS中的很多事情一樣,我正在對着牆試圖實現它。控制器沒有看到更新的模型 - 異步處理

我有一個概覽屏幕,其中有幾個記錄顯示在表中。

要渲染的概覽畫面,我使用以下路線

App.LocationsIndexRoute = Ember.Route.extend({ 

    setupController: function(controller) { 
    var locations = App.Location.find(); 
    controller.set('content', locations); 
    }, 

    renderTemplate: function() { 
    this.render('locations.index',{into:'application'}); 
    } 

}); 

這是工作的罰款。 我現在想有條件地渲染overviewtable。

  • 如果記錄存在,則呈現表格。
  • 如果沒有記錄顯示消息。

我試着用下面的控制器來實現這個。

App.LocationsIndexController = Ember.ArrayController.extend({ 
    locationsPresent: function() { 
    var model = this.get('content'); 
    return model.content.length > 0; 
    }.property() 
}); 

和下面的模板

{{#if locationsPresent}} 

    <table class="table table-hover"> 
    <tr> 
    <th>Latitude</th> 
    <th>Longitude</th> 
    <th>Accuracy</th> 
    <th></th> 
    <th></th> 
    </tr> 
    {{#each location in model}} 
     <tr> 
     <td>{{location.latitude}}</td> 
     <td>{{location.longitude}}</td> 
     <td>{{location.accuracy}}</td> 
     <td>{{#linkTo locations.edit location}}Edit{{/linkTo}}</td> 
     <td><button {{action removeItem location}}>Delete</button></td> 
     </tr> 
    {{/each}} 
    </table> 

{{else}} 
    No locations present. 
{{/if}} 

的計算locationsPresent屬性被調用一次,呈現頁面之前。那時我假設模型仍然在加載,因爲長度= 0.

頁面呈現時,App.Locations.find()中的位置可用,但locationsPresent不再被調用,意思是該頁面決定呈現No locations present.消息。

我通過Managing Asyncrony in Ember頁去了,假設計算機屬性locationsPresent會如果底層模型變化進行更新(如果它是完全加載)作爲頁面狀態:

使用計算的屬性作者淘汰當底層屬性發生變化時,需要在回調中顯式調用計算。

我很想知道我在做什麼錯,我該如何解決這個問題,但更重要的是爲什麼我似乎錯過了Ember.JS的一些核心概念。如果有人可以指出我在文檔/指南中的位置,我會很好地解釋這一點。

回答

2

我認爲這是一個簡單的修復。您需要添加您正在觀察的屬性。像這樣:

locationsPresent: function() { 
    var length = this.get('content.length'); 
    return length > 0; 
}.property('[email protected]') 

加入@each是必要的,如果locationsPresent需要重新計算被添加文內容。我認爲你也可以觀察'content.isLoaded'

+0

已經試過屬性(「content」)但錯過了'@each'。現在,'@each'可以正常工作。 thx ....屬性(「content.isLoaded」)似乎沒有工作。 – ddewaele 2013-05-03 07:11:00