home.


Tagged: polymer-binding


PolymerJS: Array Template binding

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:

  1. Ensure you run this from a local server, apache or python etc, not the local file directly.
  2. If you want to rename {{index}} and {{item}}, which is useful for dom-repeat’s within dom-repeats, you can use the as and index-as attributes
  3. Remember we still need to embed everything in a dom-bind so we can do this from outside a web component.
  4. Synchronous XMLHTTPRequests are bad, baaad.

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>
polymer polymer-binding

PolymerJS: Very simple template binding

The template element is a dumb “do not add this to the dom (until I say so)” element. It’s in the web component spec, and widly supported.

But PolymerJS’s templating binding allows you to show that template using bound data, using PolymerJS’s dom-bind web component in this simple case.

Although template binding is normally limited to PolymerJS elements, dom-bind allows you to do it inside index.html.

So, inside the body element, we’ll have this text:

<template id="app" is="dom-bind">
    {{something}}
</template>

We have a template element which has the is attribute telling us it’s an extension to a inbuild element. In this case, an extension called dom-bind, allowing us to use template binding in index.html.

Next, we need some javascript:

 window.addEventListener('WebComponentsReady', function(e) {
        document.querySelector('#app').something = "yo";
 });

This is waiting for a WebComponentsReady event to say everything is ready, then setting a property on the ‘dom-bind’ template, which is then shown in the template, in boldface.

Notes:

  1. The {{}} syntax with the template element must 1) have a name with no whitespace around it and 2) be enclosed in an element. <span>{{nowhitespace}}<span> for example. Since 1.2 you have do <span>{{blar}} {{blar1}}</span>.
  2. The is attribute is only needed when a web component, dom-bind in this case, extends an inbuild element like template, table, etc. If it doesn’t you can do something like <my-element ...>

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">
            <b>{{something}}</b>
        </template>
    </body>
    <script>
       window.addEventListener('WebComponentsReady', function(e) {
            document.querySelector('#app').something= "yo";
       });
    </script>
</html>
polymer polymer-binding

Page 1 of 1