This is kind of long, so thank you so much if you read it all. I am building a plugin and running into a problem. Here goes:
In my options, I am passing a nested object: $.aPlugin.defaults = { image: { url: "myImage.gif", width: "20px", height: "15px" }, color: "red" } A user can override defaults via metadata: <div class="plugin {image:{url:'newImage.gif'}}"></div> //no spaces in the metadata! <div class="plugin {color:'blue'}></div> "this.opts" has already been extended with the defaults. Now I extend it with metadata, if any: // true sets the extend to "deep" extend this.metaOpts = $.metadata ? $.extend(true, {}, this.opts, $ (this).metadata()) : this.opts; I call the plugin, like so: $(".plugin").aPlugin(); and then I log "this.metaOpts" to the console, because at this point, something goes very, very wrong. Here is what I get: Object (1) image (Object) url: myImage.gif //this is the default image value, even though this value has been redefined in the metadata color: red Object (2) image (Object) url: myImage.gif color: blue //the metadata overwrite shows up here. What I *expect* is that in Object 1, url will be set to "newImage.gif", because I have redefined it in the metadata. Odd thing is, if I log "this.metaOpts.image.url" to the console, I get the correct values, like so: "newImage.gif" //object 1's image.url value is correct "myImage.gif" Has anyone encountered a problem like this? Does this have something to do with the way that "deep" extend works? Is it a scope issue? I am hopelessly confused at this point. -- Mist S. Boyer