Question

我正在尝试创建与sproutcore doc中显示的相同的东西 http://docs.sproutcore.com/

左侧的搜索字段及其动态变化的内容如下。我设置了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将自动更新。

毋庸置疑，对于大量数据，您需要在服务器上进行高度优化的实施。您将不得不将UI元素修改为对于搜索无效。

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

1 个答案: