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); 

    } 

}); 

これは機能します。

EDIT - あなたのコメントに基づいて説明が異なります。

クライアントに100万個のオブジェクトを保存することはお勧めできません。ブラウザはばかげた量のメモリを使用します。

上記のコードを変更する必要があります。値が変更されたら、サーバーへの呼び出しを開始する必要があります。サーバーがあなたのために検索を行う必要があります。結果（100レコードに限られる）を返すと、コントローラの内容が更新され、GUIが自動的に更新されます。

言うまでもなく、多くのデータがあると、サーバー上で高度に最適化された実装が必要になります。検索のためにUI要素を非アクティブに変更する必要があります。