-
Notifications
You must be signed in to change notification settings - Fork 194
Your Component & Polymer
Appmaker components are built with the help of a framework called Polymer. It's a neat framework that helps you built your own custom HTML elements. In this guide, we'll show you the basics of what you need to know about Polymer! We'll be using the Counter Component from the Getting Started repo.
###Cool Polymer Stuff
Polymer has some cool tricks for handling attributes. Let's take a look at the counter element.
<polymer-element name="ceci-counter" extends="ceci-element" attributes="unit increment value">
##Getting or setting an attribute
The counter element has three attributes, and they're available inside of the element via javascript using this shorthand.
this.attributeName
##Tracking changes When an attribute (like increment) is changed, Polymer will automatically look for and fire an attributeChanged function with the corresponding name, like below...
incrementChanged: function(oldValue, newValue) {
this.increment = Number(this.increment) || 0;
}
Take a look at this part of the Counter component. {{value}} and {{displayUnit}} are attributes of the counter element. When those attributes change, they are automatically updated in the element's markup.
<div class="count-wrapper">
<span class="count">{{value}}</span>
<span class="count-label">{{displayUnit}}</span>
</div>