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
   
   });