Polymer custom component that controls iron-pages

Question

I am trying to create a custom Polymer component, which has buttons to control an iron-page (pagination and page indicator).

For now, I have created the following component:

<dom-module id="my-carousel">
  <template>
    <style>
      :host {
        display: block;
      }
      iron-pages,
      .pagination {
        border: 1px solid black;
        padding: 1em;
        margin: 1em;
      }
    </style>
    <iron-pages selected="0">
      <div>Page 0</div>
      <div>Page 1</div>
      <div>Page 2</div>
      <div>Page 3</div>
    </iron-pages>
    <div class="pagination">
      <a href="#" onclick="this.parentNode.parentNode.querySelector('iron-pages').selectPrevious(); return false;">Previous</a>
      <template is="dom-repeat" items="{{ironPages.items}}">
        &nbsp; <a href="#" onclick="this.parentNode.parentNode.querySelector('iron-pages').select({{index}}); return false;">{{index}}</a> &nbsp;
      </template>
      <a href="#" onclick="this.parentNode.parentNode.querySelector('iron-pages').selectNext(); return false;">Next</a>
      <br />
      Page {{ironPages.selected}} of {{ironPages.items.length}}
    </div>
  </template>
  <script>
    Polymer({
      is: "my-carousel",
      ready: function() {
        this.ironPages = this.$$('iron-pages');
      }
    });
  </script>
</dom-module>

Live demonstration: http://jsbin.com/rasuqaduhe/edit?html,output

The only things that seem to work are:

• Previous/Next links
• Indicator for total number of pages

My questions are the following:

1. The onclick attributes look ugly. Is there a proper way to do this?
2. Is there a better way to get the instance of the iron-page, or is this.$$('iron-pages') OK?
3. Why doesn't the number of the current selected page work?
4. Why doesn't clicking on the page number work?

Answer 1

Here: http://jsbin.com/sesope/edit?html,output

1. The onclick attributes look ugly. Is there a proper way to do this?

   Annotated event listeners. https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners

2. Is there a better way to get the instance of the iron-page, or is this.$$('iron-pages') OK?

   It's ok but you can also add an id to your iron-pages element. Polymer automatically builds a map of statically created instance nodes in its local DOM, to provide convenient access to frequently used nodes without the need to query for them manually. Any node specified in the element’s template with an id is stored on the this.$ hash by id. https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#node-finding

3. Why doesn't the number of the current selected page work?

   The iron-pages element wasn't notified that its selected property has changed. But instead of relying on that, you should have declared a selected property on your element. Hence this line <iron-pages selected="{{selected}}" id="pages"> will notify the iron-pages element to change the page whenever the my-carousel's selected property changes.

4. Why doesn't clicking on the page number work?

   Adding a $ sign after onclick would actually make it work (onclick$="Your code"). But please, don't do that. Use annotated event listeners instead.

Please refer to my jsbin answer so you may have an idea how things work in Polymer land.