Metaobjects 1.6

When you need to associate metadata to DOM elements, or you need to change some of their properties, Metaobjects is the XHTML compliant solution.

Version 1.6 – 2012-03
Copyright (c) Andrea Ercolino
Published under the MIT License

Metaobjects engine

The metadata is added to the page by means of OBJECTs whose PARAM elements define name/value pairs. The given value attribute is evaluated as JS code and the result is added to the OBJECT’s target as a property with the given name attribute. Finally the OBJECT is removed from the DOM.

Setting metadata

To set a piece of metadata into a DOM element you have to add an OBJECT to the inside (see FAQ#5) of your target element, with a PARAM whose name and value are those of the metadata.
{[ .metaobjects-set | 1.hilite(=html=) ]}

Getting metadata

To get the value of a piece of metadata from a DOM element you have to retrieve the element and access the property with the name of the metadata.
{[ .metaobjects-get | 1.hilite(=javascript=) ]}

Alternatively, you could access data with jQuery.attr() and jQuery.prop() according to if the name is a valid attribute or not.

Download

You can download metaobjects from Google Code.

FAQ

1. How do I process metaobjects ?

You should always call the metaobjects() method from the jQuery ‘document ready’ event handler.
{[ .metaobjects-default | 1.hilite(=javascript=) ]}

2. How do I tell Metaobjects to process only specific OBJECTs ?

You can specify a selector and a context, as options of the metaobjects() method. Selected OBJECTs will be those selected by jQuery with that selector and that context. The default selector is object.metaobject, and the default context is document.
{[ .metaobjects-special | 1.hilite(=javascript=) ]}

3. How do I tell Metaobjects to not remove processed OBJECTs ?

You can specify a false value for the clean option of the metaobjects() method. The default clean value is true, meaning that processed OBJECT’s are removed after processing.
{[ .metaobjects-dirty | 1.hilite(=javascript=) ]}

4. How do I know which OBJECTs have been processed ?

metaobjects() returns a jQuery object containing all the processed OBJECTs. This is also useful for chaining.
{[ .metaobjects-chain | 1.hilite(=javascript=) ]}

5. How do I set metadata for elements that don’t admit content, like IMG ?

You can specify a jQuery selector for the target option of the OBJECT’s metaparam. The default target is the parent element of the OBJECT. This is also useful for targeting many elements at once.
{[ .metaparam-target | 1.hilite(=html=) ]}

6. How do I store metadata inside the jQuery cache ?

You can specify a true value for the cache option of the OBJECT’s metaparam. The default cache value is false, meaning that the same target element is used for storage.
{[ .metaparam-cache | 1.hilite(=html=) ]}

7. How do I set namespaces ?

You can specify a PARAM’s name with as many dots as you like: each dot is considered a namespace separator.
{[ .param-namespace | 1.hilite(=html=) ]}

8. Can I use HTML comments inside objects ?

You should not, because jQuery on Internet Explorer does not work as expected if OBJECTs contain anything but PARAMs.

Examples

The following example page shows what happens when the metaobjects() function is called with different options on the same page.

• example-1.6.hml

Picture 1 – The IMG element of the example, before processing the metaobjects

Picture 2 – The same IMG element, after processing the metaobjects

Picture 3 – Metadata associated to p1 and stored into it (note that the title propery is not shown: this is because it’s a DOM property, and we are showing only user properties)

Picture 4 – Metadata associated to p2 and stored into the jQuery cache