How to notify page transition with iron-pages - polymer

Question

I am playing around with the Polymer Starter Kit by building a simple application which has a few pages. I would like for one of the pages to display a list of items that it loads from the server. The issue is that this list must load only when the page is visible / transitioned into. How should I notify "lazy-list" to actually begin loading data?
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="some-page">
<paper-material>
<lazy-list></lazy-list>
</paper-material>
</section>
<section data-route="another page">
<paper-material elevation="1">
...
</paper-material>
</section>
</iron-pages>

Answer 1

Or you can just observe route and when route === "some-page", send the refresh request to <lazy-list>?
<dom-module id="my-app">
<template>
...
<iron-pages attr-for-selected="data-route" selected="{{route}}">
<section data-route="some-page">
<paper-material>
<lazy-list id="list"></lazy-list>
</paper-material>
</section>
<section data-route="another page">
<paper-material elevation="1">
...
</paper-material>
</section>
</iron-pages>
...
</template>
<script>
Polymer({
is: "my-app",
properties: {
route: {
type: String,
observer: "routeChanged"
},
...
},
...
routeChanged: function (newval,oldval) {
if (newval === "some-page") {
this.$.list.refreshList();
}
},
...
});
</script>
</dom-module>
No new element needed.

Answer 2

Not sure if this is the best solution but I simply created a new element for the "Page" which wraps the section. This element listens for attribute changes and will load the list when "iron-selected" is added to the class name.
<dom-module id="some-page">
<style>
</style>
<template>
<paper-material>
<lazy-list id="list"></lazy-list>
</paper-material>
</template>
<script>
(function() {
Polymer({
is: 'some-page',
ready : function(){
},
attributeChanged : function(name, type){
if(this.getAttribute('class').includes('iron-selected')){
this.$.list.refreshList();
}
}
});
})();
</script>
</dom-module>