Widget function not being overridden by options

Widget function not being overridden by options

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

    });