Hi,
I have a javascript application running on a Drupal powered site. I
plan to port it to jQuery since jQuery is part of Drupal 5 and due to
jQuery's powerful features.
In my current implementation I store some meta data in the DOM
elements in order to speedup the user interface. It works like this,
first I create the DOM in javascript and then I attach the meta data
to it.
Ex:
---
businessCard = document.createElement('div');
businessCard.className = 'bcard';
businessCard.appendChild(document.createTextNode('Business Card');
businessCard.contactInfo = {
'name' : 'some name',
'address' : 'some address',
'phoneno' : 'some phoneno',
'email' : 'some email'
}
cardHolder = document.getElementById('cardholder');
cardHolder.appendChild(businessCard);
---
By using this approach it will be very fast to get the business card
data and put them to somewhere else in the document, for example use
them for a tooltip or insert them in a form.
Sadly, jQuery doesn't seem to support this kind of features. I is
possible to extend the $() object with new methods by using
jQuery.fn.extend() but I can't seem to extend the $() objects with
meta data like contactInfo in the example above. However, it seems
that I have found a possible solution. By using the jQuery get()
function it is possible to get the underlying DOM, and by using this
it is possible to extend it with my meta data (contactInfo).
It works like this:
---
jQuery.fn.extend({
setBusinessCardParam: function(param) {
$(this).get(0).contactInfo= param;
},
getBusinessCardParam: function(){
return $(this).get(0).contactInfo;
}
});
businessCard = $('<div>Business Card</
div>').addClass('bcard').setBusinessCardParam({
'name' : 'some name',
'address' : 'some address',
'phoneno' : 'some phoneno',
'email' : 'some email'
});
$('#cardholder').append(businessCard);
---
I have tested this approach with success.
And now to you guys. Is this the right way to store meta data in
jQuery or have I missed something?
