Ember.js：觸發'Ember.computed.filter'來更新控制器中屬性更改時

我試圖根據來自文本輸入的輸入使用Ember.computed.filter過濾ArrayController的內容。Ember.js：觸發'Ember.computed.filter'來更新控制器中屬性更改時

App.IndexController = Ember.ArrayController.extend({ 
     filteredPeople: Ember.computed.filter('model', function(person){ 
      var searchFilter = this.get('searchFilter'); 
      var regex = new RegExp(searchFilter, 'i'); 
      return person.firstName.match(regex); 
     }), 
     // this is bound to the value of a text input helper 
     // I'm just pre-filling the value to show that the filtering does work 
     searchFilter: 'kris' 
});

這個工程很棒，並按預期過濾。不過，我希望隨時更新searchFilter的值（即任何時候有人輸入到文本輸入中）。現在的問題是，只有在模型本身發生變化或控制器第一次加載時纔會更新。

有無論如何觸發Ember.computed.filter更新時searchFilter更新？我使用的是Ember.computed.filter，因爲它似乎比普通的計算屬性效率更高，我相信每次都會重新創建整個數組（請讓我知道我是否錯誤）。此外，Ember.compute.filter只是易於使用，非常乾淨！

我用上面的設置創建了一個JSBin。當用戶輸入文本框時，我想以某種方式觸發Ember.computed.filter更新自己。

http://emberjs.jsbin.com/pitefica/1/edit

謝謝您的時間和任何援助。

來源

2014-05-04 Sarus

也許太容易了，但Ember.computed.filter支持使用.property（）依賴鍵，以便這將正常工作：只http://emberjs.jsbin.com/tefes/1/edit

來源

2014-05-04 13:59:44

不太容易！這正是我所希望的。我想我甚至在某個時候嘗試過它，但一定已經把這個語法稍微放了下來。謝謝你的JSBin。總是有用，以確認它應該工作=） – Sarus

很高興我能幫上忙。棘手的部分是，如果你只添加'searchFilter'作爲依賴關鍵，它不起作用。可能是因爲它以某種方式覆蓋了由computed.filter（）的第一個參數提供的所需「模型」依賴關鍵字。但這只是一個猜測，我仍然需要學習很多關於ember內部的知識。 –

@BavoVanGeit一旦'searchFilter'改變了整個數組應該重新呈現？我的印象是'Ember.computed.filer'通過添加/刪除項目到相同的數組來避免這種情況，但是當我檢查DOM並監視jsbin中的單個'li'時，他們絕對看起來都是每次重新呈現。 –

我不確定您如何使用Ember.computed.filter來做到這一點。這將是非常容易使用Ember.Array.filter方法和計算的歡迎使用屬性來實現：

searchFilter: 'kris', 

filteredPeople : function(){ 
    var content = this.get('content'), 
     searchFilter = this.get('searchFilter'), 
     regex = new RegExp(searchFilter, 'i'); 

    return content.filter(function(person){ 
     return person.get('firstName').match(regex); 
    }); 
}.property('[email protected]', 'searchFilter')

filteredPeople現在將重新計算，每次有新的變化的content陣列中或當searchFilter變化值。

JSBin：http://emberjs.jsbin.com/pitefica/6/edit

來源

2014-05-04 11:51:53

我：

App.IndexController = Ember.ArrayController.extend({ filteredPeople: Ember.computed.filter('model', function(person){ var searchFilter = this.get('searchFilter'); var regex = new RegExp(searchFilter, 'i'); return person.firstName.match(regex); }).property('model','searchFilter'), searchFilter: 'kris' //this is bound to the value of a text input helper });

jsbin這個方法的關注點是基於查看Ember.Array.filter的來源，它只是創建一個全新的數組，並將新對象推送到它上面，從而通過過濾條件。因此，我認爲對於較大的陣列來說效率不高。我正在爲一個數組實現這個功能，這個數組有100多個元素，刷新整個DOM可能不會很好。這就是爲什麼我試圖去引用使用ArrayComputed的Ember.computed.filter路由。 – Sarus

好的，這改變了事情。我實際上有將100多個元素渲染到DOM中的經驗。我覺得你知道這件事上的燼毛性能問題。我們實際上採用了以下解決方案：一個'pagedContent'數組，它只顯示'filteredContent'數組中的x個項目。這允許無限的滾動或分頁實現。 –

Ember.js：觸發'Ember.computed.filter'來更新控制器中屬性更改時

回答

相關問題