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](https://github.com/Polymer/TemplateBinding/blob/master/examples/how_to/bind_to_text.html) 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 javascript


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: Custom element properties

[Previously](http://blog.denevell.org/polymer-simple-template-binding.html), 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


PolymerJS: Sharing CSS styles across elements

If you want to share styles -- including Polymer's shim for CSS variables and its :host selector, etc -- across multiple custom elements you need an experimental feature called CSS imports.
 
After dom-module include the tag <link rel="import" type="css" href="common.css">.
 
In the common.css file have your normal styles. Then voila.
 
Notes:
  1. Polymer 1.1 has deprecated this method in favour of a [new one](https://blog.polymer-project.org/announcements/2015/08/13/1.1-release/).
  2. If you want to include such polymer happy styles in your main document, index.html etc, just use a normal import that you'd use to import a custom element, with the <style is="custom-style"> in such.
Full source an-ele.html:

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

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

    <link rel="import" type="css" href="common.css">    
    <template>  
        <span class="name">hi</span>
    </template> 
    <script>
        Polymer({
            is: "an-ele"
        }); 
    </script>

</dom-module>

Full source common.css:

:host {
    display: block;
    background-color: var(--an-ele-name-bgcolor, white);
}
:host.warning {
    background-color: var(--an-ele-name-bgcolor-warning, white);
}

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>
        <an-ele class="warning">
        </an-ele>
    </body>
</html>

polymer polymer-styles


PolymerJS: Dynamically changing a CSS style

[Previously](http://blog.denevell.org/polymer-custom-element-styled-css-variables.html), we learnt how to use the shimmed CSS variables to style a custom element.

 
We may want to change that dynamically. And we can by using the customStyle property on the custom element.
 
Say we have a click listener on our element, and we want to change its '--an-ele-name-bgcolor' CSS variable.
 
We can get access to such property from the element (likely using event [retargeting](http://blog.denevell.org/polymer-event-retargeting.html)) and change the style like so.

t.clicked = function(e) {
   var tar = Polymer.dom(e).localTarget;
   tar.customStyle['--an-ele-name-bgcolor'] = 'pink';
   tar.updateStyles();
};

For performance reasons, we have to call updateStyles on our component ourself.
 
Notes:
  1. We can also dynamically alter the varibles in a [CSS mixin](http://polymerjs.newfivefour.com/post/126529902517/allow-custom-elements-to-be-styled-many-rules), but only with [obliterating any CSS you don't respecify](https://github.com/Polymer/polymer/issues/2268) from what I can tell at the moment.
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">
        <style is="custom-style">
                --an-ele-name-bgcolor: purple;
            }
        </style>
    </head>
    <body>    
        <template id="app" is="dom-bind">
            <an-ele on-tap="clicked">
            </an-ele>
        </template>
    </body>
    <script>
       window.addEventListener('WebComponentsReady', function(e) { 
            var t = document.querySelector('#app');
            t.clicked= function(e) {
               var t = Polymer.dom(e).localTarget;
                t.customStyle['--an-ele-name-bgcolor'] = 'pink';
                t.updateStyles();
            };
       });
    </script>
</html>

Full source: an-ele.html

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

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

    <style>
        .name {
            background-color: var(--an-ele-name-bgcolor, green);
        }
    </style>
    <template>
        <span class="name">hi</span>
    </template>
    <script>
        Polymer({
            is: "an-ele"
        });
    </script>

</dom-module>

polymer polymer-styles

Page 1 of 4
next