在Ember中刷新內容時緩解閃爍的UI

Question

問題

我有一個顯示工作列表的視圖。該視圖有一個按鈕，它調用名爲refresh的控制器方法。最初我將content設置爲這個列表，但是注意到UI會閃爍，這一旦在定時器上運行時會特別惱人。

我設法使一切工作，而無需使用閃爍如下：

App.WorkersIndexController = Ember.ArrayController.extend 
    refresh: -> 
     console.log 'refreshing workers' 
     # set a property to a new collection 
     @set 'refreshing', App.Worker.find() 

    # observer that watches the new collection load 
    update: (-> 
     refreshing = @get 'refreshing' 
     return unless refreshing.get('isLoaded') 
     # what this question is about... 
     Ember.run => 
      @set 'content', refreshing 
    ).observes('refreshing.isLoaded') 

正如你可以看到我設置刷新的內容給一個臨時變量，並觀察內容的加載，然後更新內容。直到我添加了對Ember.run的呼叫，完全消除了閃爍，內容才閃爍。

我明白爲什麼閃爍正在發生，我明白爲什麼Ember.run使它消失，但我的問題是什麼是最好的方法來解決這個問題，而不訴諸於Ember.run？我覺得打電話給Ember.run是最後的手段...任何幫助將不勝感激！

編輯：另外我沒有使用燼數據。該find方法是這樣的：

App.Worker.reopenClass 
    find: -> 
     console.log 'loading workers' 
     workers = Em.A [] 
     request = $.getJSON '/api/admin/workers', (data) => 
      console.log ' -> loaded workers' 
      data.forEach (d) => 
       worker = App.Worker.create(d) 
       worker.set 'isLoaded', true 
       workers.pushObject(worker) 
     request.error => 
      console.log ' -> failed to load workers' 
      workers.set 'isFailed', true 
     request.complete => 
      workers.set 'isLoaded', true 
     workers 

Answer 1

我已經有一個固定的名單誰的對象我只是改變避免在類似情況下閃爍。

在最簡單的情況下，讓說了要顯示的名字，並且知道你知道你不會有3組以上的元素，你可以讓

App.names = [ 
    Ember.Object.create({name:"", active:false}), 
    Ember.Object.create({name:"", active:false}), 
    Ember.Object.create({name:"", active:false}) 
] 

，有你的模板是

{{#each App.names}} 
    {{#if active}} 
     <li> {{name}} </li> 
    {{/if}} 
{{/each}} 

然後你可以通過運行

App.names[0].set("name", "Frank"); 
    App.names[0].set("active", true); 

添加名稱和沒有更新列表任何閃爍。一次只能更改列表中的單個元素，因此您沒有重繪整個列表中的閃爍。

實際上，您可能需要將App.names設置爲ArrayController，以便您可以優雅地處理擴展列表，但其中的要點將起作用。