Passing this to jQuery plugin

Question

I am using the autoSuggest plugin from http://code.drewwilson.com/entry/autosuggest-jquery-plugin across my website to search for various different items. One major function with this plugin is that when a selection is added, a callback function gets called and I check whether this is new data added or it is fetched from the web service and then update some variables(which I use for submission)

Up-till now, I have been using it without any thought but now I have decide to go OOP way and create a JS object to wrap this plugin and other associated functions(common callbacks) and config values(urls) etc.

In the class I have different data variables which will be updated as the selection are added and removed. halfway through the code, I realized that the callbacks take only one argument and there is no way(apparent to me) by which I could pass those variables or the object's context to these callbacks

Below is the code I have written so far :

var coSuggest = function(options) {
this.selector = options.selector;
this.options = options;
//this.that = this;
//this.submitURL = options.submitURL;

//if y=type is not defined , default type will be people

if ( typeof (options.type) === 'undefined') {
    this.type = 'people';
} else {
    this.type = options.type;
}

// if as_options are not defined, as_options will be a empty object
//console.log(typeof(options.as_options));

if ( typeof (options.as_options) === 'undefined') {
    this.as_options = {};
} else {
    this.as_options = options.as_options;
}

this.valuesField = $('#as-values-' + this.as_options.asHtmlID);

//the initData field will be an array of object containing {id,value} of prefilled items initially
//the addData field will be an array of object containing {id,value} of new selected items from the suggestions
//the newData field will be an array of strings [values] containing the new values added
//the removeData field will be an array of objects containing {id,value} of the items from data to be removed
if ( typeof (options.initData) !== 'undefined') {
    this.initData = options.initData;
    this.as_options.preFill = this.initData;

}
this.as_options.selectionAdded = this.selectionAdded;

// callback function to be added in as_options as selectionAdded
this.as_options.selectionRemoved = function(elem) {
    console.log(elem);
}
//return this

};

//urlConf for searching the items sitewide
coSuggest.prototype.urlConf = {
people : 'abc',
interest : "index.php/profile/getInterestsSkillsTags",
skill : 'xyz',
teacher : 'xyz',
designation : 'xyz',
city : 'xyz',
subject : 'xyz',

};

 // callback function to be added in as_options as selectionAdded
 coSuggest.prototype.selectionAdded = function(elem) {
//console.log($(this).find('.as-values'));
console.log(elem);
}

//bind function to bind the autoSuggest plugin with the selector provided

coSuggest.prototype.bind = function(options) {  
//console.log(as_options);
$(this.selector).autoSuggest(base_url + this.urlConf[this.type], this.as_options);
}

How can I do this without losing the re-usability of the code ?

Answer 1

I am answering this question as I think I have solved the problem by extending the code. I added a new parameter in the selectionAdded callback and supplied the function reference in that function while calling.