控制铁页的聚合物自定义组件

Question

我正在尝试创建一个定制的聚合物组件，它有控制iron-page (分页和页面指示符)的按钮。

现在，我已经创建了以下组件：

<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>

现场演示：http://jsbin.com/rasuqaduhe/edit?html,output

似乎唯一起作用的事情是：

• 上/下链接
• 总页数指标

我的问题是以下

1. onclick属性看起来很难看。有什么合适的方法吗？
2. 是否有更好的方法来获取iron-page的实例，或者this.$$('iron-pages')是否正常？
3. 为什么当前所选页面的数量不能工作？
4. 为什么点击页码不起作用？

Answer 1

这里：http://jsbin.com/sesope/edit?html,output

1. onclick属性看起来很难看。有什么合适的方法吗？带注释的事件侦听器。https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners
2. 是否有更好的方法来获取铁页的实例，或者这是$$(‘铁页’)可以吗？没关系，但您也可以向id元素中添加一个iron-pages。聚合物在其本地DOM中自动构建静态创建实例节点的映射，以提供对常用节点的方便访问，而无需手动查询它们。元素模板中使用id指定的任何节点都由id存储在this.$哈希中。https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#node-finding
3. 为什么当前所选页面的数量不能工作？没有通知iron-pages元素其selected属性已更改。但是，您应该在元素上声明一个selected属性，而不是依赖它。因此，这一行<iron-pages selected="{{selected}}" id="pages">将通知iron-pages元素在my-carousel的selected属性更改时更改页面。
4. 为什么点击页码不起作用？在$后面添加一个onclick符号实际上会使它工作(onclick$="Your code")。但求你了别这么做。改为使用带注释的事件侦听器。

请参考我的jsbin回答，这样你就可以知道聚合物土地上的事情是如何运作的。