How do I store an array of objects?
I have an object image
I can do things like image.top
and it will return a value, or I can do image.myPoints[0].left
and it will return a value. I basically have this image object that stores values for me. I want to be able to put multiple image
objects in an array so i could do something like this:
$("#toPinpoint").mapImage({
useAjax: false,
pinpoints: [ { "top": 50,
"left": 280,
"width": 200,
"height": 200},
{ "top": 0,
"left": 0,
"width": 300,
"height": 74 } ]
});
I use this function to create the object, the pinpoints get added on to the object. When the mapImage function is called this is what happens:
$.开发者_如何学JAVAfn.mapImage = function(options){
//Set user input options and defaults
var optionConfig = $.extend({}, $.fn.mapImage.defaults, options);
image=this;
this.image = this;
// Assign defaults
this.previewMode = optionConfig.previewMode;
this.pinpoints = optionConfig.pinpoints;
image.pinpoints = optionConfig.pinpoints;
image.pinpointCount = 0;
image.selected = 0;
...}
This sets the image properties and now I want to modify the properities with my application then SAVE these image
objects into an array.
My problem with this is that the array is loading up with image objects, but it seems to fill the whole array with the object i just pushed in, so it doesnt save my old image objects. For example, if i do myArray[0].myPoints[0].left
, lets say it retruns 30, and then i push another image object that has myPoints[0].left equal to 20, the first image object I have in the array turns into 20 instead of saving it as 30. If theres a good way of solving this issue it would be greatly appreciated. Thank you!
Using array.push(x)
should add x
to the end of array
. However, it will not create a copy of x
, so if you then change an attribute of x
and push()
it again, your array will contain two instances of x
with the updated attribute - I suspect this is what you are seeing. (That is, you may be changing the top
property of your image
and push()
ing it again, instead of creating a whole new image
to push()
).
var myArray = new Array();
You need to use the "new" keyword.
I think you're making this more complicated than need be.
(function($){
$.fn.mapImage = function(options) {
var defaults = { /* your defaults here */ };
// Merge default options with passed in options and store
options = ($.extend({}, defaults, options));
// Do other stuff
};
})(jQuery);
// Backup current pinpoints and modify the current one
$('#toPinpoints').data('pinpoints-backup', $('#toPinpoints').data('pinpoints').splice());
$('#toPinpoints').data('pinpoints')[0].top = 100;
// Push a new array of pinpoints
$('#toPinpoints').data('pinpoints').push({"top": 100, "left": 50, "width": 200, "height": 150});
Be careful with jQuery.extend()
as it does not operate recursively, so any arrays that are within the defaults sub-array will be completely overwritten by those in the options array, not merged.
If you'll need to access the pinpoints data later, you may wish to use jQuery.data()
by doing something like this.data($.extend({}, $.fn.mapImage.defaults, options));
instead of reassigning the options variable. The pinpoints for a given element could then be accessed anywhere by $('#toPinpoint').data('pinpoints')
which will return the same array you passed in via options to mapImage()
. You could then traverse all the pinpoints with jQuery.each()
.
If I'm missing something in what you're trying to do, please let me know.
精彩评论