up.script [up-data]

HTML selector

Attaches structured data to an element, to be consumed by a compiler or event handler.

If an element with an [up-data] attribute enters the DOM, Unpoly will parse the JSON and pass the resulting object to any matching up.compiler() functions and up.on() callbacks.

To programmatically parse an [up-data] attribute into an object, use up.data(element).

Attaching data to elements

Example

A container for a Google Map might attach the location and names of its marker pins:

<div class="google-map" up-data="[
  { lat: 48.36, lng: 10.99, title: 'Friedberg' },
  { lat: 48.75, lng: 11.45, title: 'Ingolstadt' }
]"></div>

The attribute value will be parsed as relaxed JSON. The parsed object is handed to your compiler as a second argument:

up.compiler('.google-map', function(element, pins) {
  var map = new google.maps.Map(element)
  for (let pin of pins) {
    var position = new google.maps.LatLng(pin.lat, pin.lng)
    new google.maps.Marker({ position, map, title: pin.title })
  }
})

Similarly, when an event is triggered on an element annotated with [up-data], the parsed object will be passed to any matching up.on() handlers:

up.on('click', '.google-map', function(event, element, data) {
  console.log("There are %d pins on the clicked map", data.pins.length)
})

You may also parse the data object programmatically using the up.data() function:

let data = up.data('.google-map')
data[0].lat // result: 48.36
data[0].lng // result: 10.99
data[0].title // result: 'Friedberg'