After introducing template binding, we'll now look at repeating elements in an array.
This is done via another extension to a template called dom-repeat
, which takes an items
attribute naming the property to which we want to bind.
<template is="dom-repeat" items="{{weather}}">
<span>{{index}}</span> <span>{{item.dt_txt}}</span>:
<b>{{item.weather.0.description}}</b> <br>
</template>
Inside the 'dom-repeat' template, we have {{index}}
and {{item}}
which refer to the numerial index and the element in the bound array. If we want to access array elements, we use .5.
not [5]
.
The javascript is nearly exactly as before, but this time we'll set an array as a property. For "fun", we'll synchronously get the weather for sunny, sunny Manchester.
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.openweathermap.org/data/2.5/forecast?q=Manchester&mode=json", false);
xhr.send();
document.querySelector('#app').weather = JSON.parse(xhr.response).list;
Notes:
{{index}}
and {{item}}
, which is useful for dom-repeat's within dom-repeats, you can use the as
and index-as
attributesdom-bind
so we can do this from outside a web component.Full index.html;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
</head>
<body>
<template id="app" is="dom-bind">
<template is="dom-repeat" items="{{weather}}">
<span>{{index}}</span> <span>{{item.dt_txt}}</span>:
<b>{{item.weather.0.description}}</b> <br>
</template>
</template>
</body>
<script>
window.addEventListener('WebComponentsReady', function(e) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.openweathermap.org/data/2.5/forecast?q=Manchester&mode=json", false);
xhr.send();
document.querySelector('#app').weather = JSON.parse(xhr.response).list;
});
</script>
</html>