I have widgetA with data structure - d. widgetA initializes widgetB and passes data to widgetB, like
$('<div>').widgetB({d:d});
But, when data in widgetA changes, in widgetB they dont, thats because when passing variables as options, jquery widget factory clones them.
How to pass reference pf variable to widget?
In this example widgetB does not change value and both times prints A.
Actually i found a trick to pass option by reference, if you reinitialize the widget the option is passed by reference (http://jsfiddle.net/sbNUh/8/).
You can pass a function like this
// widjet A
self.a = $('<div>').widgetB({ d: function() { return d; }}).appendTo(el);
....
// widjet B
$('#con').append('<div>'+this.options.d().a+'</div>');
This also signals more that you are actively retrieving the latest state
Change d to a function, in this way:
var private_var_d = "A";
function d(set){
if(typeof set != "undefined") private_var_d = set;
return private_var_d;
}
(self.a=$('<div>').widgetB({d:d}))
Whenever you want to get the variable, use: this.options.d(). When you want to change the variable, use this.options.d("newvariable").
This method's effectiveness is based on how functions work: Functions can refer to variables which are defined in the same scope of definition. So, function d can always refer to private_var_d, because they're both defined in the same (anonymous) function.
Fiddle: http://jsfiddle.net/sbNUh/2/.
