Polymer v1.0

The “dom-bind” template is a perfect way to bind data without the creation of an element <template id="t" is="dom-bind"> <template is="dom-repeat" items="{{data}}"> <div>{{item}}</div> </template> </template> <script> var t = document.querySelector('#t'); t.data = ["Message 1", "Message 2"]; </script> [content_block slug=polymer-js-demo-of-the-week-footer]


Array Selector is the last binding helper element we’ll go over covering the biggest part of the whole framework’s documentation concerning data binding. <array-selector id="selector" items="{{messages}}" selected="{{selected}}" multi toggle></array-selector>   toggleSelection: function(e) { var item = this.$.messageList.itemForElement(e.target); this.$.selector.select(item); }   In the following example we can select/deselect items in the array-selector that will handle the […]


The template repeater has two more interesting attributes for filtering and sorting. The sort attribute will sort the items according the comparer function sortPriority. In the sort priority we can see that we compare two items concerning their priority subproperties and this will sort the items according to priority in ascending order. To learn more […]


Another interesting and useful template type extension is the dom-repeat. The dom-repeat template will loop through the array items of the array given in the items attribute. Then we can get the index and the item in the loop. Our first example is a simple loop of a messages array as you can see we […]


Polymer provides a set of custom elements to help with common data binding use cases. Let us check the conditional templates. We have the custom HTMLTemplateElement type extension called dom-if. With this we can stamp contents to the DOM only when the property in it is set to true. In our example, the isSecureMessage will […]


In the previous demo we mentioned observers and object sub-properties.To listen to changes made in an array now we can use some additional methods. For example to listen to whether an item is added/removed we can add a splice observer observers: [ 'messagesAddedOrRemoved(messages.splices)' ] This will trigger the method specified offering an object with multiple […]


Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!