SproutCore的 - 與動態內容

Question

我試圖創造同樣的事情所示SproutCore的文檔 http://docs.sproutcore.com/

左側和下方動態變化的內容searchfield搜索菜單。 我已經設置了SC.ListView其contentBinding和我的燈具都顯示。

我該如何連接SC.TextFieldView的輸入與我的SC.ListView的內容？ 有人可以提供有用的鏈接，或者可能指向正確的方向嗎？

謝謝

Answer 1

所以你的列表視圖內容由ArrayController驅動。您可以擴展該控制器並創建一個App.FilteringArrayController。我認爲SCUI框架已經有了某種過濾控制器。

App.FilteringArrayController = SC.ArrayController.extend({ 

    searchValue: null, // bind the value of your text field to here. 

    searchValueDidChange: function(){ 
     this.invokeOnce(this._filterContent); // every time the value changes, filter the content 
    }.observes('searchValue'), 

    _filterContent: function(){ 
     var searchVal  = this.get('searchValue'), 
      content   = this.get('content'), 
      filteredContent = []; 

     // loop over content here, comparing searchVal to some property of the objects 
     // in content. For every match, add the object to filteredContent 

     // finally, set the new content. 
     // any collection views bound to this controller's arrangedObjects property will update 
     this.set('content', filteredContent); 

    } 

}); 

對於中小型列表，這將起作用。

編輯 - 根據你在評論中澄清事情是不同的。

在客戶端保留一百萬個對象不是一個好主意。瀏覽器將使用一個荒謬的內存量。

所以你應該改變上面的代碼，當值改變時，你應該發起一個調用服務器。服務器應該爲你搜索。當它返回結果（應限制爲100條記錄）時，您將更新控制器上的內容，GUI將自動更新。不用說，有了大量數據，您將需要在服務器上實現高度優化的實施。您將不得不修改您的用戶界面元素，以便在搜索時處於不活動狀態。