sproutcore - Sproutcore -具有动态内容的搜索菜单

Question

我正在尝试创建与 Sproutcore 文档中所示的相同的东西
http://docs.sproutcore.com/

左侧的搜索字段及其下方的动态更改内容。
我已经用它的contentBinding设置了SC.ListView，我的固定装置都显示了。

如何将SC.TextFieldView的输入与SC.ListView的内容连接起来？
有人可以提供有用的链接或指向正确的方向吗？

谢谢你

Answer 1

因此，您的 ListView 内容是由ArrayController驱动的。您可以扩展该 Controller 并创建一个App.FilteringArrayController。我认为SCUI框架已经具有某种过滤 Controller 。

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条记录)时，您将更新 Controller 上的内容，并且GUI将自动更新。

不用说，对于大量数据，您将需要在服务器上进行高度优化的实现。您将必须将UI元素修改为对搜索无效。