[jQuery] Deep Extend edits all objects?
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