JQueryUI 小部件功能范围问题答案

【问题标题】：JQueryUI widget function scope problemJQueryUI 小部件功能范围问题
【发布时间】：2011-06-28 16:17:48
【问题描述】：

我不确定如何准确描述这个问题，但我正在使用非常有用的 SlickGrid JQuery 插件制作一个 JQueryUI 小部件。 Slickgrid 允许设置一个用作“过滤器”的函数，以在客户端启用搜索行。像这样……

_filter: function (item) {
            if (this.options.searchString == null)
            { return true; }
            if (this.options.searchString.length == 0)
            { return true; }
            for (var prop in item) {
                if (item[prop] != null) {
                    if (item[prop].toString().toLowerCase().indexOf(searchString.toLowerCase()) > -1)
                    { return true; }
                }
            }
            return false;
        }


self.options.dataView.setFilter(self._filter);

我的问题是一旦_filter 被调用，this 被设置为窗口元素，并且不再持有对小部件的引用，所以我的所有选项都不可用。我如何告诉_filter 用户在网格中搜索什么字词？

难点：页面上会有多个小部件实例，每个都有自己独立的过滤器。另外，我不想修改 SlickGrid 的工作方式。

【问题讨论】：

标签： javascript jquery-ui widget this slickgrid

【解决方案1】：

不确定这是否是最佳答案，但这是我想出的：

通过http://www.robertsosinski.com/2009/04/28/binding-scope-in-javascript/ 上的建议，在我的创建函数中，我写道

this._filter = function (item) {

                if (this.options.searchString == null)
                { return true; }
                if (this.options.searchString.length == 0)
                { return true; }
                for (var prop in item) {
                    if (item[prop] != null) {
                        if (item[prop].toString().toLowerCase().indexOf(this.options.searchString.toLowerCase()) > -1)
                        { return true; }
                    }
                }
                return false;
            } .bind(this);

将范围绑定到小部件。

【讨论】：