Approaches for embedding script required data in markup

Question

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:

1. A separate in-page block of javascript/json with a dictionary containing this additional information.
2. 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.

Answer 1

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.