Question

I am passing a JSON object as a reference to my custom jquery widget like this:

 var jsonData =  { "Name": "John ", "Country": "US" };

 $("#testdiv").TestWidget({MyData:jsonData});

And in my widget, I am changing the data like this:

$.widget("my.TestWidget", {

    options: {
        MyData: null
    },
    _create: function () {
    this.options.MyData.Name = "NewName";

    }
});

But, the change is not reflected in the original JSON data because apparently jQuery is creating a copy of my JSON data when creating the widget!

This is very undesirable. Is there any way to prevent copying of data and instead pass the object as reference?

Above is a simplified version of our original scenario.

Thanks

Answer 1

I’m afraid this is not possible. Looking at the jQuery UI source code, you can see why:

_createWidget: function( options, element ) {
    // $.widget.bridge stores the plugin instance, but we do it anyway
    // so that it's stored even before the _create function runs
    this.element = $( element ).data( this.widgetName, this );
    this.options = $.extend( true, {},
            this.options,
            $.metadata && $.metadata.get( element )[ this.widgetName ],
            options );

    var self = this;
    this.element.bind( "remove." + this.widgetName, function() {
            self.destroy();
    });

    this._create();
    this._init();
},

The options is being copied using the $.extend method.

Personally, I don’t see a reason why you would want to pass jsonData as a reference here. It seems to me that there’s something wrong with your design. Could you provide more information on that matter?