Polymer.js attaches a handler to a paper button in a standard HTML document
I have four buttons and try different ways of attaching the handler declaratively:
<paper-button id="btnEnter" class="enabled" raised roll="button" on-tap="lm.LoaderActionEnter">Enter</paper-button>
<paper-button id="btnRW" class="disabled" raised roll="button">
<core-icon icon="av:fast-rewind" on-tap="lm.LoaderActionRW()"></core-icon>
</paper-button>
<paper-button id="btnPause" class="enabled" raised roll="button">
<core-icon icon="av:pause-circle-outline" onclick="lm.LoaderActionPause()"></core-icon>
</paper-button>
<paper-button id="btnFF" class="disabled" raised roll="button">
<core-icon icon="av:fast-forward" on-tap="{{lm.LoaderActionFF}}"></core-icon>
</paper-button>
The only thing that works is the standard onclick = "handler ()". I'm guessing that on-tap = "handler" would be the way to go? The above code is in a normal index.html page, within the regular flow of the page. The javascript and polymer code is lazy loaded after the main page is displayed (splash screen).
What's the best way to do this? I just found demos that use "{{handler}}", but how would you set up data binding?
source to share
The syntax on-tap="{{handler}}"
is polymer specific; it will only work inside a Polymer element template or in an auto-binding template .
The attribute onclick
works because it is embedded in the DOM, but we generally recommend not using an event click
because it introduces a delay time in some mobile browsers.
So, if you are not using the auto-linking pattern for your index page, I would recommend doing it imperatively, instead of this:
Polymer.addEventListener(document.getElementById('btnEnter'), 'tap', lm.LoaderActionEnter);
You may ask why Polymer.addEventListener
instead of just addEventListener
? It is a convenience method associated with the Polymer gesture library that generates a gesture tap
.
The call Polymer.addEventListener
will ensure that everything is configured correctly in order to generate the required event. (For example, for some browsers, you may need to specify a CSS property touch-action
to receive open touch events.)
Event handlers registered declaratively with on-handlers automatically go this way, so most of the time you use Polymer you don't need to reference directly to Polymer.addEventListener
.
source to share