Best practices for App level event binding?

87 views
Skip to first unread message

kman...@gmail.com

unread,
Dec 4, 2014, 7:53:52 AM12/4/14
to polym...@googlegroups.com
In the Polymer docs I see this pattern for adding event listeners to app-level elements... however this seems to break with the "everything is a component" idea.
Does it make sense to treat the main app element (child of body) as it's own Custom element and then encapsulate the event listeners via normal Polymer conventions using `Polymer` constructor?
<script>
var tabs = document.querySelector('paper-tabs');
var list = document.querySelector('post-list');

tabs.addEventListener('core-select', function() {
  list.show = tabs.selected;
});
</script>

Eric Bidelman

unread,
Dec 4, 2014, 3:57:41 PM12/4/14
to kman...@gmail.com, polymer-dev
On Thu, Dec 4, 2014 at 4:53 AM, <kman...@gmail.com> wrote:
In the Polymer docs I see this pattern for adding event listeners to app-level elements... however this seems to break with the "everything is a component" idea.
Does it make sense to treat the main app element (child of body) as it's own Custom element and then encapsulate the event listeners via normal Polymer conventions using `Polymer` constructor?

The examples in the docs show examples of using elements outside of polymer-element and inside of it. For this particular example, users of paper-tabs don't have to know anything about Polymer to use it. They just attached listeners and set properties like any other element. 

For more power, we often create higher level app components because on-* handlers and data-binding features are darn convenient! Also saves a bit of boilerplate and typing.

All that said, create components where it makes sense for you. 
<script>
var tabs = document.querySelector('paper-tabs');
var list = document.querySelector('post-list');

tabs.addEventListener('core-select', function() {
  list.show = tabs.selected;
});
</script>

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/84ebb061-21cc-4075-9f85-af8493519fdd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Kristian Mandrup

unread,
Dec 4, 2014, 4:33:27 PM12/4/14
to Eric Bidelman, polymer-dev
Thanks Eric. I’ve since noticed and read/watched some great blog posts and screencasts on Polymer app architecture by the Divshot team. They recommend an app level element to encapsulate everything inside body as a component, turtles all the way down from there… I think this is the best approach and makes intuitive perfect sense :)


<body fullbleed unresolved>
  <qa-app></qa-app>

  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>
  <!-- endbuild-->
</body>

---

<firebase-login id="baseLogin" user="{{user}}" statusKnown="{{statusKnown}}" location="https://{{globals.firebase}}.firebaseio.com" provider="github" on-login="{{onLogin}}" on-error="{{onLoginError}}"></firebase-login>
<pvc-globals values="{{globals}}"></pvc-globals>
<core-header-panel>

<script>
(function () {
'use strict';
Polymer({
  ready: function() {
    this.globals.firebase = '<your-firebase>';
  },
Reply all
Reply to author
Forward
0 new messages