Examples

Helpers

Helpers are available to make generation and inclusion of polymer sources easier. You of course can still use html tags if you would like too.

Automatic Helper

Creates the necessary html and link tags needed to use a polymer element.

Source: automatic_helper.html

<template name="autoHelperExample">
	{{> paper_checkbox attrs=attributeObject}}	
</template>

automatic_helper.js

Template.autoHelperExample.helpers({
	attributeObject = function(){
		return {checked: true}
	}
});

Generates:

<link rel="import" href="/bower_components/paper-checkbox/paper-checkbox.html">
<paper-checkbox checked></paper-checkbox>

Link Helper

Create the necessary link tags to the specific polymer source file.

Source: link_helper.html

<template name="linkHelperExample">
	{{> paper_checkbox_link}}
</template>

Generates

<link rel="import" href="/bower_components/paper-checkbox/paper-checkbox.html">

Block Helper

Each helper can be used as a block.

Source: automatic_helper.html

<template name="blockExample">
	{{#paper_button attrs=attributeObject}}Submit!{{/paper_button}}
</template>

automatic_helper.js

Template.blockExample.helpers({
	attributeObject = function(){
		return {class: "myClass"}
	}
});

Generates:

<link rel="import" href="/bower_components/paper-button/paper-button.html">
<paper-button class="myClass">Submit!</paper-button>

Common Pitfalls

Event capture

Polymer makes heavy use of DOM shadows. The polymer element get's it own DOM structure that is independent from the page's DOM. Performing a DOM selection ('click #addButton') will not identify any objects that sit inside a shadow DOM.

<template name="myDialog">
	<paper-dialog heading="Dialog Title">
		<paper-input id="myInput"></paper-input> <!-- Inside Shadow DOM -->
		<paper-button id="addButton" affirmative>Add</paper-button>  <!-- Inside Shadow DOM -->
	</paper-dialog>
</template>

Template.myDialog.events({
	// Never is fired because Blaze cannot look inside a shadow DOM.
	'click #addButton': function(event, template) {
		console.log('Save was pressed');
	}
});

The workaround to this problem is to define the contents of your shadow-enabled element in another template. Blaze will parse the template and attach the events prior to the template being pushed into the parent template.

<template name="myDialog">
	<paper-dialog heading="Dialog Title">
		{{> myDialogInternal }} <!-- In shadow DOM -->
	</paper-dialog>
</template>

<template name="myDialogInternal">
	<paper-input id="myInput"></paper-input> <!-- Not in shadow DOM -->
	<paper-button id="addButton" affirmative>Add</paper-button>  <!-- Not in shadow DOM -->
</template>

Template.myDialogInternal.events({
	// Is fired.
	'click #addButton': function(event, template) {
		console.log('Save was pressed');
	}
});