Object in jquery widget behaving as only one instance

Question

I've been developing a jQuery widget using the widget factory.

All is well except I've noticed that if I instantiate the widget on more then one DOM element on the same page, any object within the widget is shared between the DOM elements EXCEPT for the options object.

I thought that all objects and functions had their own instance within the widget. I'm obviously missing something and would appreciate some guidance.

For example:

(function($) {
  $.widget("a07.BearCal", {
    options: { className : "test" },
    _glbl: { something: "" },
    _create: function() {
      this._glbl.something = this.element.attr('class');
      this.options.className = this.element.attr('class');
    },
  });
})(jQuery);

// Instantiate widget on .full
$('.full').BearCal();

//Should output full
console.log($('.full').data('BearCal')._glbl.something);

//Should output full
console.log($('.full').data('BearCal').options.className);

// Instantiate widget on .mini
$('.mini').BearCal();

//Should output mini
console.log($('.mini').data('BearCal')._glbl.something);

//Should output mini
console.log($('.mini').data('BearCal').options.className);

//Should output full but outputs mini
console.log($('.full').data('BearCal')._glbl.something);

//Should output full
console.log($('.full').data('BearCal').options.className);

Working example of this: http://jsfiddle.net/NrKVP/4/

Thanks in advance!

mu is too short · Accepted Answer · 2012-10-21 05:06:12Z

2

The properties of your widget:

$.widget("a07.BearCal", {
  // The stuff in here...
});

get attached to your widget's prototype. The widget factory knows about options and knows that it needs to duplicate them per-widget: your options are behaving as you expect because the widget factory arranges for this behavior. The widget factory doesn't know anything about _glbl so it gets left on the prototype and thus shared by all instances of your widget.

You can duplicate your _glbl yourself if you want per-widget copies:

  this._glbl = { something: this.element.attr('class') };

That will give you a different _glbl object on each widget.

Demo: http://jsfiddle.net/ambiguous/UX5Zg/

If your _glbl is more complicated, then you can use $.extend to copy it and merge something in:

this._glbl = $.extend(
  { },
  this._glbl,
  { something: this.element.attr('class') }
);

You'll want to use true as the first argument to $.extend if you need a deep copy. The empty object, { }, is needed as $.extend will merge everything into its first object argument and you want a fresh copy.

Demo: http://jsfiddle.net/ambiguous/pyUmz/1/

answered Oct 21, 2012 at 5:06

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

EasyCo Over a year ago

Makes perfect sense. However, as an extension to the original question, why does the 'something' object in the following example not behave the same? The only difference is it's not nested within another object. jsfiddle.net/NrKVP/11

mu is too short Over a year ago

Because that something is set directly on the object (this.something = ...) but this._glbl isn't on this, it comes from this's prototype. Add console.log('---->', this.hasOwnProperty('_glbl'), this.hasOwnProperty('something')); at the bottom of _create and read about hasOwnProperty.

Collectives™ on Stack Overflow

Object in jquery widget behaving as only one instance

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related