Welcome to the final part of this review of the new Pluralsight course Getting Started with Polymer.js by Bill Stavroulakis.
Bill is a Microsoft MVP, and the creator of Dotnetweekly. He started his career in Silicon Valley in 2006 developing Facebook applications with more than 6 million users. He then worked on the Ruby-on-Rails framework, implementing a back-end portal for a renowned educational institution in Greece. Nowadays, he focuses on the .NET platform and works with a start-up in the educational field called Drexnotes.
Also in this series:
Part 2 – Properties and Databinding
Events and Behaviors
Polymer Events
Introduction to Polymer events plunk
There are several methods for binding to events in Polymer.
We can use a method beginning with on- such as:
- on-click
- on-tap
- on-mouseover
on-tap is a gesture event and it’s recommended over on-click for and event that works consistently on both desktop and touch based devices.
Bill also introduces the listeners object, which is used to bind events to executing functions. And we see the listen and unlisten methods in action.
Also see Annotated event listener setup
Custom Events
How to setup our own custom events in our elements plunk
Here we have an alert element containing an array of strings.
properties:{
alerts: {
type:Array,
value:['alert1', 'alert2']
}
},
The template uses dom-repeat and adds a button for each item in the array.
- {{item}}Remove
When we click on the remove button, the remove item button is triggered, the following function is run:
removeItem: function(e){
this.splice('alerts', e.model.index, 1);
this.fire("alert-item-removed", e.model.item);
}
Bill explains the fire method
Gesture Events
Gesture events for touch and mouse environments plunk
This example logs each tracking event, and Bill shows that it repeatedly displays the latest mouse coordinates to the console.
on-tap should be used instead of on-click for reliable cross-platform results.
Event Retargeting
Finding the event target as they bubble plunk
Bill begins by explaining the concept of bubbling.
Event retargeting is a Shadow DOM feature which changes an event’s target as it bubbles up.
The example demonstrates this by logging the rootTarget, localTarget and the path to the console.
Also see the official docs
Behaviors
Extending custom element prototypes with shared code modules plunk
Polymer gives us the ability to share code and functionality between element prototypes.
This example toggles the boolean property isToggled
Polymer({
is: "alert-element",
behaviors: [ToggleBehavior]
});
Bill concludes by explaining that behaviors are prototype declarations that we can expand on, and events are actions that we listen to.
Congratulations on making it all of the way through the course. We have covered almost everything in the Polymer framework.
Zombie Code Kill 