home.


Tagged: polymer


Use data binding in the HTML Template element standalone without Polymer

If you’re using the new template tag to define inert content in your HTML, you may want to use data binding also.

This comes as default with Polymer, but they created a library–now only used in a previous version of Polymer–that allows you to data bind standalone/independently of Polymer.

Let’s first user bower to get that bower install -s Polymer/TemplateBinding. This puts a couple of repositories in your bower_components library.

Now you can use the examples here as below:

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="bower_components/TemplateBinding/load.js"></script>
    <title>Template binding</title>
    <style>
    </style>
  </head>
  <body>
    <ul>
    <template id="text" repeat="{{ text }}">
      <li>Text is bound here: {{ value }}</li>
    </template>
  </body>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var t = document.getElementById('text');
      t.model = {
        text: [
          { value: 'Fee' },
          { value: 'Fi' },
          { value: 'Fo' },
          { value: 'Fum' }
        ]
      };
  </script>
</html>
html-template html-data-binding polymer

PolymerJS: Using behaviors

Behaviours are simple enough to define:

<script>
    SomeThing  = {
        yo: function(yo) {
            console.log(yo+"!!!");
        },  
    }
</script>

The above can have a properties object or various callbacks, just like a normal Polymer definition.

Then in the actual Polymer element, do something like:

Polymer({
    is: "some-thing",
    behaviors: [SomeThing],
...

Now you can share that behavior among multiple custom elements should you wish.

polymer polymer-behaviors

PolymerJS: Communicating between elements

We’ve learnt how to set custom properties on custom elements.

But we may want to communicate data between the host element and the custom element. We can use a property on the custom element for this.

In the host document, index.html in this case, we’ll have a script tag that sets a property on a ‘dom-bind’ template called ‘warning’.

window.addEventListener('WebComponentsReady', function(e) { 
    var t = document.querySelector('#app');
    t.warning = true;
});

Now in our template code in index.html we’ll reference the {{warning}} property and also pass it to our custom element.

<template id="app" is="dom-bind"><div>{{warning}}</div>
  <an-ele warning="{{warning}}" on-tap="clicky"></an-ele>
  ...
</template>

Now in our custom element, set an on-tap event listener and change the value of ‘warning’ in that.

...
<template><div on-tap="clicky">hi</div>
</template><script>
    Polymer({
        is: "an-ele",
        properties: {
            warning: {
               type: "Boolean",
               notify: true
            }
        },
        clicky: function() {
            this.warning = !this.warning;
        }
    });
</script>
...

Note the notify property that’s been added to the ‘warning’ property. This makes sure any changes to ‘warning’ in the element bubble up to the hosts, our template in index.html for example.

Now when we tap on the div in our custom element, the value in index.html will automatically update.

Note:

  1. Although we’re only communicating between index.html and the element, it’s trivial to communicate between two elements – in this case you’d just bind the ‘warning’ property to another custom element.

Full source: an-ele.html

<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="an-ele">
    <template>
        <div on-tap="clicky">hi</div>
    </template>
    <script>
        Polymer({
            is: "an-ele",
            properties: {
                warning: {
                   type: "Boolean",
                   notify: true
                }
            },  
            clicky: function() {
                this.warning = !this.warning;
            }
        });
    </script>    
</dom-module>

Full source: 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">
        <link rel="import" href="an-ele.html">
    </head>
    <body>

        <template id="app" is="dom-bind">
            <div>{{warning}}</div>
            <an-ele  warning="{{warning}}"> </an-ele>
        </template>
    </body>
    <script>
       window.addEventListener('WebComponentsReady', function(e) { 
            var t = document.querySelector('#app');
            t.warning = true;
       });
    </script>
</html>
polymer polymer-communication polymer-properties

PolymerJS: Binding properties to DOM attributes & styling

We saw previously that we could set a custom element’s property and have that value changed in the DOM.

In that case, we set a boolean and <span>{{warning}}</span> changed. That is, the DOM changed.

However, if we want to bind a variable to an attribute, <div warning="{{warning}}">hi</div>, then the DOM won’t automatically change when the property does, although the underlining javascript value will.

So we have to use the <div warning$="{{warning}}">hi</div> syntax instead to change the DOM attribute. If we combine this with some CSS selectors, we can use it to style the element.

div {
    background-color: pink;
}
div[warning] {
    background-color: red;
}

Notes:

  1. If you open up the DOM inspector, you can see the attribute change when the property does, in the example below.

Full source: an-ele.html

<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="an-ele">   
    <style>
        div {
            background-color: pink;
        }
        [warning] {
            background-color: red;
        }
    </style>
    <template>
        <div warning$="{{warning}}">hi</div>
    </template>
    <script>
        Polymer({
            is: "an-ele",
            properties: {
                warning: {
                   type: "Boolean"
                }
            }
        });
    </script>
</dom-module>

Full source: 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">
        <link rel="import" href="an-ele.html">
    </head>
    <body>    
        <template id="app" is="dom-bind">
            <an-ele warning="{{warning}}" on-tap="clicky">
            </an-ele>
        </template>
    </body>
    <script>
       window.addEventListener('WebComponentsReady', function(e) { 
            var t = document.querySelector('#app');
            t.clicky= function(e) {                
               var t = Polymer.dom(e).localTarget;
               t.warning = !t.warning;
            };
       }
    </script>
</html>
polymer polymer-styles polymer-properties

PolymerJS: Custom element properties

Previously, we set javascript properties to be bound a template that extends dom-bind.

We now want to do the same to a custom element. So we need to specify the properties in the initialisation code.

Polymer({
    is: "an-ele",
    properties: {
        warning: {
           type: "Boolean"
        }
    },
});

This specifies there’ll be a property on the element. There are other properties to set for the ‘warning’ property, but we’ll leave them for now.

In our template for the element, we can now reference the property.

<template>
  <span>{{warning}}</span>
</template>

Now, outside the element, if we change the property, i.e. document.querySelector('an-ele').warning = false, it will show change the displayed true or false in the template.

Full source: an-ele.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="an-ele">

    <template>
        <span>{{warning}}</span>
    </template>
    <script>
        Polymer({
            is: "an-ele",
            properties: {
                warning: {
                   type: "Boolean"
                }
            },
        });
    </script>

</dom-module>

Full source: 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="an-ele.html">
    </head>
    <body>
        <template id="app" is="dom-bind">
            <an-ele warning="false" on-tap="clicky">
            </an-ele>
        </template>
    </body>
    <script>
       window.addEventListener('WebComponentsReady', function(e) { 
            var t = document.querySelector('#app');
            t.clicky= function(e) {
               var t = Polymer.dom(e).localTarget;
                if(t.warning) {
                    t.warning = false;
                } else {
                    t.warning = true;
                }
            };
       });
    </script>
</html>
polymer polymer-properties

Page 1 of 4
Next