Search jQuery

jQuery Forum

Developing jQuery Core

paulirish

patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

in Developing jQuery Core • 12 years ago

In the HTML5 spec, data-* attributes have been added to associate data to elements:

http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data

In jQuery, the data() method allows developers to associate data to elements and retrieve it.

And now... "with your powers combined..."

<div data-patchlocation="github" data-awesome="true" data-testcount="28" />

$( div ).data( 'patchlocation' ) // "github"
$( div ).data( 'awesome' ) // true
$( div ).data( 'testcount' ) // 28

Proper JSON is supported, too:

<div data-details='{"authors": ["paul irish","andrée hansson"], "prop": "html5"}' data-cacherules="everythingaroundme"/>

var details = $( div ).data( 'details' );
details.authors[ 1 ] ; // "andrée hansson"

// also, internal data cache preferred over DOM
$( div ).data( 'cacherules' , 'DOLLA DOLLA' );
$( div ).data( 'cacherules' ) // "DOLLA DOLLA"

This feature to data() is also proposed as a replacement to the metadata plugin .

The patch in three acts:

http://github.com/paulirish/jquery/commits/html5data

http://github.com/paulirish/jquery/compare/jquery:master...html5data (in compare view)

Worth noting:

The elem.dataset API (from HTML5), currently unimplemented anywhere, camelcases based on hyphens and such. This data() api does not.
The spec says " Authors of libraries that are reused by many authors are encouraged to include their name in the attribute names, to reduce the risk of clashes. For example, a library called "DoQuery" could use attribute names like data-doquery-range , and a library called "jJo" could use attributes names like data-jjo-range ." Requiring authors to prefix all data attr's with 'jquery-' is bit much to me, so this doesn't enforce such a thing.
Because JSON requires double quotes around keys, they must either be escaped or single quotes should be used for the data-* attribute value.

I've had various iterations of this for quite a while and think this is the strongest, but I'm eager to hear everyone's feedback. (Andrée Hansson (peol) worked with me on this patch; thank you sir.)

Replies(8)

cowboy.ben

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

12 years ago

I don't see a real benefit for having a single .data method that works as both an internal data AND data- attribute getter/setter. In fact, it seems like it would end up being somewhat limiting (and possibly confusing) to the end-user, who would lose granular control over the ability to choose one method over the other (for example, if they wanted to set a data-foo attribute, or get a data-foo attribute in an instance where a "foo" data had already been set) Also, I'm concerned about the possible performance considerations regarding checking data- attributes unnecessarily, in situations where the user isn't using them.

That being said, I like the overall idea where the data- attribute is parsed as JSON (converting "true" to true and "1" to 1). I'd rather see the existing $.fn.data and $.data methods remain as-is, with the creation of a new $.fn-specific method created just for getting and setting data- attributes on elements.

Also, I haven't had time to look at the code for this yet, I'm out the door.. but I will when I get the chance.

- Ben

--
http://bit.ly/benalmandotcom - "There's a Ben Alman jQuery plugin for that"

paulirish

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

12 years ago

It seems like it would end up being somewhat limiting (and possibly confusing) to the end-user, who would lose granular control over the ability to choose one method over the other
(for example, if they wanted to set a data-foo attribute, or get a data-foo attribute in an instance where a "foo" data had already been set)

Granular control is still available, by way of .attr(). The element attribute remains so if you just want to interact with it straight up, you can do that just fine.

I'm concerned about the possible performance considerations regarding checking data- attributes unnecessarily, in situations where the user isn't using them.

Perf is certainly a consideration here. What's worth noting is that the data-* attr() call (and subsequent try/catch, JSON.parse) is only run if the internal data cache reports a miss. I couldn't think of any reasonable use cases for someone to be grabbing .data('missing') repeatedly with an unknown expectation if there will be data in the cache (or DOM) waiting for them.

Thanks ben.

paulirish

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

12 years ago

Some questions from Nathan Smith asked elsewhere:

I think that plugin idea is good.
It would first try to use browser native data store, right? And if not, would shove it on data-* ?

It always reads the internal cache first. And: it never stores to the attribute, only reads from it.

cowboy.ben

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

12 years ago

Since you can already get and set data- attribute values with .attr, this plugin's functionality seems more related to .attr than .data to me. Still, I don't think it belongs as part of .attr because there's no good way to tell the method that you either do or don't want to auto-parse JSON. Just like, if it were part of .data, there would be no good way to tell it to read from a data- attribute if a same-named data key existed.

This seems like it would best as a $.fn.dataAttr (or a slightly more "sexy" name, like $.fn.metadata) method that only performs the data- attribute get (+parse if necessary) and set (+stringify if necessary) functionality.

- Ben

--
http://bit.ly/benalmandotcom - "There's a Ben Alman jQuery plugin for that"

dave.meth..

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

12 years ago

This seems pretty cool to me. It's great to be able to initialize the data object in markup. Ben, I agree it doesn't belong in .attr() because it's only reading the attribute to initialize the data object. Once that's done it acts no different than .data() does today, right?

We'll need to be clear on the semantics:

$("div").data("silly", '{"love-songs":true,"putty":1}').html();

Would anyone expect the serialized html to include a data-silly attribute? That can be solved in documentation though.

Does this belong in core, or should it first prove itself as a plugin?

seankoole

Reageren: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

12 years ago

I have got to say, I love the $.parseJSON approach, such interaction is long overdue in jQuery core (I know we have metadata).

However I strongly feel such an adaption should not belong in $.fn.data. As $.fn.data was created to get and set any type of data without having to worry about serialization or where it came from. You store it as is and nothing else. Extending this to just a 'getter' for data attributes is useless IMO, as you're just copying $.fn.attr!

I'm thinking of an option where if you:

- get, we use $.parseJSON if it's JSON

- set, we use JSON.stringify if it's an Object

However the support for JSON.stringify would be a PITA as you'd have to create your own fallback.. You can assume it won't get called that very often, but it's still extra weight.

This in turn makes me ask two more questions:

- If you have $.parseJSON, shouldn't we have a stringify version? It's a great utitliy

- If a stringify method isn't welcome, perhaps let the user take care of the stringification if he wants to use it that badly?

I am just ratling on here or?

paulirish

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

12 years ago

Dave,

Thanks for the feedback

I think this ability has already proven itself in the success of the metadata plugin.

As for the API, we have been teaching developers to use the data() method for associating data with elements. This enhancement follows those lines by maintaining the same API for the html5-blessed path for this task.

Sean.

JSON.stringify in core has been brought up many times before.. It's mostly been passed on as the implementation would be too large. The jquery-json plugin does a good job of this for users.

Just wanted to write out the only risk I see here:

If you were using the data() method previously,
and then looking around in the cache for something that might not exist,
and simultaneously making use of html5 data-* attributes,
and have one of them named the exact same name as what you were looking for,
and have that attribute on the same element where you're looking currently...

Then you might get unexpected behavior.

Aside from that edge case, this enhancement brings joy to everyone. :)

paulirish

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

12 years ago

A few clarifications as I went over this in more detail with Ben Alman:

so you posit that the only value data- attributes have is for getting, and never for setting

Yup. With the existing data() API, there is no good reason to set to data-* attributes.

Note: there is a perf hit if there is a data cache miss, as the associated data-* attribute will be requested. Small, of course.

so every time you get .data( 'foo' ) if it's not set, you look at the data-foo attribute, and if that has a value, you set the data and return the value?

Yup. (and if it's JSON, we'll parse it into an object)

Top Reply

Response title

Attachments

jQuery Forum

patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

Replies(8)

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

Reageren: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

Re: patch feedback requested: html5 data-* attrs transcend into the $.fn.data() API

Statistics

Tags

Actions

Related Posts