We keep learning polymer’s templates features. Its time to take a look at iterating templates, conditional flow and referencing another template. If you would like to review bindings to a property, a complex object or a specific context please review Polymer Templates - Bindings
By now you got the idea and differences between TemplateBinding and Polymer. From this point onwards I will just add the Polymer’s version.
knowledge revision: in our previous article we talked about Bindings. The native template element does not provide bindings capabilities. This is one if those the enhanced features provided by TemplateBinding library created by the Polymer team. This library is used by Polymer under the hood but it could be used as standalone.
Repeat in Polymer has two possible formats: tacit or named scope. The tacit form looks like this:
The named scope form is:
Sometimes you need the the iteration Index. You can use the iteration index like any other variable using double mustache syntax:
Note: A few features of native templates can’t be replicated perfectly with the polyfills library, and require some workarounds. Some browsers don’t allow ‘template’ elements inside certain elements like ‘select’ or ‘table’. Browsers with native support for ‘template’ allow it to be a child of elements ‘select’ and ‘table’.
Here is the workaround
You can use ‘bind if’ or ‘if’:
Polymer has no
else clause. Use a negative condition instead:
Here is how it looks in a polymer element:
You may also use to condition whether to repeat a template or not.
Conditional boolean attributes
This is another form of condition using ?= syntax. Let’s see an example:
You can set an element’s
hidden property using
The boolean attribute gets set if it is bound to a
true value. Note the use of
?= syntax for conditionally setting a boolean attribute.
Referencing another template
Lets say we want to use the same template multiple times. When creating an instance, the content of this template will be ignored, and the content of #myTemplate is used instead. In the following example, the text ‘Used by any template which refers to this one by the ref attribute’ will be printed twice.
You can also use it to easily represent tree structures with a recursive template:
Choose templates dynamically
This is simplistic example on how you could dynamically decide which template to display based on a given logic.
We give each template a unique id but instead of reference one or the other, we bind the selection to our model.
Created vs Attached vs DomReady: Polymer shortens web components lifecycle callbacks. Created - from createdCallback - is called when an instance of the element was created. Here we can instantiate our Model.
In this example, I wanted to choose the templates dynamically based on an existing model. So I decided to perform my logic in a later stage. I could have picked ‘attached’ - from attachedCallback - which is called when an instance of the element was inserted into the DOM.
I chose ‘domReady’ which is called when the element’s initial set of children exist. From the docs: “This is an appropriate time to poke at the element’s parent or light DOM children. Another use is when you have sibling custom elements (e.g. they’re .innerHTML‘d together, at the same time). Before element A can use B’s API/properties, element B needs to be upgraded. The domReady callback ensures both elements exist.”
Try it yourself
You should go to ele.io and take any of the Polymer examples and play!
Ele.io is the jsfiddle for polymer, created for polymer playing and developed with polymer elements.
Next we will go into a third article on binding on native html elements, multiple insertion points and one way binding.