JQueryUI widget function scope problem
I'm not sure exactly how to describe this problem, but I'm making a JQueryUI widget out of the very useful SlickGrid JQuery plugin. Slickgrid allows for setting a function used as a "filter" to enable searching rows on the client. Like this...
_filter: function (item) {
if (this.options.searchString == null)
{ return true; }
if (this.options.searchString.length == 0)
{ return true; }
f开发者_JAVA百科or (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);
My problem is that once _filter
gets called, this
is set to the window element, and no longer holds a reference to the widget, so all of my options are unavailable. How can I tell _filter
what term the user is searching for in the grid?
Difficulty: multiple widget instances will be on the page, each with their own separate filter. Also, I'd prefer not to modify the way SlickGrid works.
Not sure if this is the best answer, but here's what I came up with:
Via the advice on http://www.robertsosinski.com/2009/04/28/binding-scope-in-javascript/ , in my create function, I wrote
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);
Which bound the scope to the widget.
精彩评论