Polymer 1.0 custom fire event not catching - polymer-1.0

Question

I have trouble to catch a custom event that fired from my-login Element with a button to the my-overview Element. I really have no clue why this is not working.
index.html
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="login">
<paper-material id="pmLogin" elevation="1">
<paper-toolbar>
<h1 class="paper-font-display1"><span>Login</span></h1>
</paper-toolbar>
<my-login id="elLogin"></my-login>
</paper-material>
</section>
<section data-route="overview">
<paper-material id="pmOverview" elevation="1">
<paper-toolbar>
<h1 class="paper-font-display1"><span>Overview</span></h1>
</paper-toolbar>
<my-overview id="elOverview"
on-call-overview-refresh="reloadOverview">
</my-overview>
</paper-material>
</section>
</iron-pages>
my-login.html
routeTo: function(route) {
var app = document.querySelector('#app');
app.route = route;
this.fire('call-overview-refresh');
},
my-overview.html
reloadOverview: function() {
...
}

Answer 1

In short, you need to declare the on-* event handler on the element that actually fired the custom event - in this case <my-login>.
Seeing that your <iron-pages> is in index.html, I suppose the markup is wrapped inside a <template is="dom-bind"></template>? If that's the case, your index.html might look something like this:
<template id="app" is="dom-bind">
...
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="login">
<paper-material id="pmLogin" elevation="1">
<paper-toolbar>
<h1 class="paper-font-display1"><span>Login</span></h1>
</paper-toolbar>
<my-login id="elLogin"
on-call-overview-refresh="callReloadOverview"></my-login>
</paper-material>
</section>
<section data-route="overview">
<paper-material id="pmOverview" elevation="1">
<paper-toolbar>
<h1 class="paper-font-display1"><span>Overview</span></h1>
</paper-toolbar>
<my-overview id="elOverview"></my-overview>
</paper-material>
</section>
</iron-pages>
...
</template>
<script>
window.addEventListener("WebComponentsReady", function (e) {
var app = document.querySelector("#app");
app.callReloadOverview = function () {
app.$.elOverview.reloadOverview();
}
...
});
</script>
In the above snippet, when <my-login> fires the call-overview-refresh event, the callReloadOverview() function will be called, which in turns calls <my-overview>'s reloadOverview() method.