jQuery Forum

My widget function isn't getting overridden by the options I pass in. What am I doing wrong?

And PS: Do you think my Base Framework should be a widget at all? Or am I just trying to force my design to meet the JQuery UI design? Any recommendations of how I should change it?

1. (function ($) {
     /*
   
       Design Widget
   
     */
     $.widget( "MY_NAMESPACE.design", {
   
         _create: function () {
   
               if (!this.options.framework)
                   this.options.framework = $('<div></div>')
                       .appendTo($('body'))
                       .baseFramework();
   
               this._super( "_create" );
       },
   
         addRow: function() {
   
             var framework = this.options.framework;
   
             // Why do I need to say framework.baseFramework
             // Why cant I just do framework.addRow(); ??
             // Is it possible to do this?
             var row = framework.baseFramework('addRow');
   
             row.appendTo(this.element);
         }
     });
   
     /*
    
       Framework Widget
   
       Framework could be Bootstrap twitter, WordPress, other
   
     */
     $.widget( "MY_NAMESPACE.baseFramework", {
   
         options: {
             layoutType: 'grid',
           maxColumns: 10
       },
   
       addRow: function() {
           return $('<div></div>').addClass('grid-row');
       }
   
     });
   
   })(jQuery);
   
   
   
   // .............
   
   $(document).ready(function() {
   
       var bootstrapTwitterFramework = $('<div></div>').baseFramework({
           maxColumns: 12,
   
           addRow: function() {
               return $('<div></div>').addClass('row');
           }
       }).appendTo($('body'));
   
       var bar = $("[data-type='design']").design({framework: bootstrapTwitterFramework});
   
       bar.design('addRow'); // this calls the default function ::addRow instead of the overridden function passed in
   
   });
   

When instantiating a widget do I have to 'apply' it to an element already attached to the body element? Ie, like the following...

1. var myWidget = $('#foo').MyWidget({option1: 'foo'})
2. // Must add the element to the body to get it to function correctly (am I correct?)
3. myWidget.appendTo($('body'));
   

Or can I just instantiate one like so...

1. var myWidget = new MyWidget({option1: 'foo'});

When I try to call a widgets method why do I have to call it like this...

1. var myWidget = $('#foo').MyWidget();
2. myWidget.MyWidget('addRow');

Why cant I just do the following? Or maybe I can and my widget is just wrong?

1. var myWidget = $('#foo').MyWidget();
2. myWidget.addRow();

Below is my code:

1. (function ($) {
   
     $.widget( "MY_NAMESPACE.MyWidget", {
   
         addRow: function() {
   
             console.log("Foo");
         }
     });
   
   })(jQuery);
   
   // .............
   
   $(document).ready(function() {
   
       var myWidget = $('#foo').MyWidget();
       myWidget.addRow();
   
   });