What approaches can be used to embed additional meta data in HTML markup, where that data is required by client side javascript.
Some simple examples of what I mean:
- A list of contacts which when clicked shows their position in a map. ie: how to associate a lat/long with each contact.
- A set of images which when clicked pops up a draggable rubberband for selecting a cropping rectangle. ie: how to associate that clipping rectangle with each image.
The approaches I’ve seen so far:
- A separate in-page block of javascript/json with a dictionary containing this additional information.
- Using rel attributes to store strings that are then parsed by the script.
What other approaches are there? What are the pros/cons of each?
Another way to think of this: is there an easy way to pre-populate the .data property of a jQuery object directly from markup.
I’m using JQuery Metadata Plugin for this purpose. There are several ways to generate the data (see the documentation).
I can’t talk about the pros/cons of this approach because this is the only one I ever used, but it was suitable in every scenario when I needed to add some metadata.