3 ms·

Using jQuery Data for Easy Data Associations

29 points by jeanhsu 15y ago

singingwolfboy 15y ago
What template system are they using?
- kree10 15y ago
  Looks like http://www.liquidmarkup.org/ http://www.liquidmarkup.org/
  - cdcarter 15y ago
    Could also just be mustache.
    - filipmares 15y ago
      the syntax is similar to mustache. it was purely meant to help with the rest of the code explanation. think of it as pseudo-coding.
Xurinos 15y ago
I like to maintain a clean namespace, which means that generally, instead of recording data on DOM objects, I wrap it in closures. For those circumstances where I absolutely cannot do that (and it is rare), I try to be as local as I can and use a wrapper name... DOMObject.my_special_site_id.specific_data1 DOMObject.my_special_site_id.specific_data2 Nasty global variableses...
- filipmares 15y ago
  thanks. will keep that in mind.
  - catch23 15y ago
    Another good option is Linq -- it's great for storing lots of data. We use it here with backbone. We're using this one: http://linqjs.codeplex.com/ http://linqjs.codeplex.com/
rimantas 15y ago
A couple of notes: if you care about performance, use $.data(), i.e. instead of $('body').data(key, value) use $.data(document.body, key, value). Also .data() lets you access HTML5 data-* attributes. Note, that doing so values are converted to proper objects if possible. See http://jsfiddle.net/wLfJV/1/ http://jsfiddle.net/wLfJV/1/ Unrelated, but worth reminding: don't use $(this).attr('id')— this.id is simpler and much much faster: http://jsperf.com/el-attr-id-vs-el-id/2 http://jsperf.com/el-attr-id-vs-el-id/2
- filipmares 15y ago
  performance: thanks, you are right. i read something right after posting. i think it was written by Paul Irish. thanks again for the performance tips. html5 data: those are the attributes that i was referring to in the beginning of the post.
kwellman 15y ago
Can anybody clarify the last line of the blog article [1]? The author makes it sound like storing data using $.data() is an async operation. The API docs make no mention of this. In some quick tests using Chrome, I was always able to immediately retrieve the value that was stored. I'm actually planning on using this method, so I'd really like to know. [1] "Furthermore, storing data takes a certain amount of time, so you might get a null exception if you are planning on retrieving it right after storage. There are currently no plans to add a callback to the jQuery data that I’m aware of." Edit: $.data() seems to be async, but $(el).data() is not. At least that's what I found. Maybe that explains the difference in speeds.

29 points by jeanhsu 15y ago

singingwolfboy 15y ago

What template system are they using?

kree10 15y ago
Looks like http://www.liquidmarkup.org/ http://www.liquidmarkup.org/
- cdcarter 15y ago
  Could also just be mustache.
  - filipmares 15y ago
    the syntax is similar to mustache. it was purely meant to help with the rest of the code explanation. think of it as pseudo-coding.

Xurinos 15y ago

I like to maintain a clean namespace, which means that generally, instead of recording data on DOM objects, I wrap it in closures. For those circumstances where I absolutely cannot do that (and it is rare), I try to be as local as I can and use a wrapper name... DOMObject.my_special_site_id.specific_data1 DOMObject.my_special_site_id.specific_data2 Nasty global variableses...

filipmares 15y ago
thanks. will keep that in mind.
- catch23 15y ago
  Another good option is Linq -- it's great for storing lots of data. We use it here with backbone. We're using this one: http://linqjs.codeplex.com/ http://linqjs.codeplex.com/

rimantas 15y ago

A couple of notes: if you care about performance, use $.data(), i.e. instead of $('body').data(key, value) use $.data(document.body, key, value). Also .data() lets you access HTML5 data-* attributes. Note, that doing so values are converted to proper objects if possible. See http://jsfiddle.net/wLfJV/1/ http://jsfiddle.net/wLfJV/1/ Unrelated, but worth reminding: don't use $(this).attr('id')— this.id is simpler and much much faster: http://jsperf.com/el-attr-id-vs-el-id/2 http://jsperf.com/el-attr-id-vs-el-id/2

filipmares 15y ago
performance: thanks, you are right. i read something right after posting. i think it was written by Paul Irish. thanks again for the performance tips. html5 data: those are the attributes that i was referring to in the beginning of the post.

kwellman 15y ago

Can anybody clarify the last line of the blog article [1]? The author makes it sound like storing data using $.data() is an async operation. The API docs make no mention of this. In some quick tests using Chrome, I was always able to immediately retrieve the value that was stored. I'm actually planning on using this method, so I'd really like to know. [1] "Furthermore, storing data takes a certain amount of time, so you might get a null exception if you are planning on retrieving it right after storage. There are currently no plans to add a callback to the jQuery data that I’m aware of." Edit: $.data() seems to be async, but $(el).data() is not. At least that's what I found. Maybe that explains the difference in speeds.