Question

I have a plugin which uses variables like so:

(function( $, window) { 

$.widget("mobile.multiview",$.mobile.widget, {

         // variables
         vars: {
            $ignoreMyOwnNextHashChange : false
            }
        }); 
   ...  
   }) (jQuery,this);

I want to set $ignoreMyOwnNextHashChange from the outside = another plugin sitting after this one. Is this possible? Doing it like this doesn’t work:

  $.mobile.multiview.vars.$ignoreMyOwnNextHashChange = true;

Answer 1

You have two good options here:

1. Use the default options object inside of the widget class. All widgets have an options property with lots of other functionality built around it. Using options will allow you to write getters and setters for each options property:

   $("#selector").multiview("option", "$ignoreMyOwnNextHashChange"); // getter
   $("#selector").multiview("option", "$ignoreMyOwnNextHashChange", true); // setter
   

   If you go this route, you actually end up with less code in your widget:

   (function($, window) {
   
           $.widget("mobile.multiview", {
   
           // variables
           options: {
               $ignoreMyOwnNextHashChange: false
           }
       });
   })(jQuery, this);
   

   If your property is something that can be set upon initialization and then retrieved or set later, this is probably your best option. All of the jQueryUI widgets follow this pattern.

2. Your second option is to create a property specific method that you can call. This is useful if you are internally setting a variable on initialization and then allowing the user to get or set it:

   (function($, window) {
   
       $.widget("mobile.multiview", {
           vars: {
               $ignoreMyOwnNextHashChange: false
           },
   
           ignoreMyOwnNextHashChange: function (newValue) {
               if (arguments.length) {
                   this.vars.$ignoreMyOwnNextHashChange = newValue;
               }
   
               return this.vars.$ignoreMyOwnNextHashChange;
           }
       });
   })(jQuery, this);
   

   Now, after instantiating the widget, you can call that function like this:

   $("#selector").multiview("ignoreMyOwnNextHashChange"); // getter
   $("#selector").multiview("ignoreMyOwnNextHashChange", true); // setter.
   

Some good resources for tips on writing plugins against the widget factory are jQueryUI’s dev guide on the widget factory and the jQueryUI source itself.