Iteration and Attributes

This example is about iteration and how to change the value of attributes.
The previous example was only changing a single value.
For each entry we get from the JSON we want a new link in the list.

The HTML:

<ol class="siteList reference@id">
  <li class="sites">
    <a class="name url@href" href="http://beebole.com">Beebole</a>
  </li>
</ol>

The JSON data:

var data = {
  "reference": "3456",
  "sites": [
    {"name": "Beebole", "url": "http://beebole.com"}, 
    {"name": "BeeLit", "url": "http://beeLit.com"}, 
    {"name": "PURE", "url": "http://beebole.com/pure"}]};

The Javascript to do this action (here with jQuery):

$('ol.siteList').autoRender(data);

Note:

To change the value of an attribute when auto-rendering, use the syntax below in your html class:

JSON-property-name@attribute-name