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

1. Data Binding
2. Working with Attributes
3. Event Binding
4. Polymer Events
5. Component DOM Manipulation

Attributes

Polymer Attribute Docs

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;
}

Data Binding

Polymer Data Binding Docs

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>