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

Reply via email to