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

Question

我正在尝试创建一个自定义 Polymer 组件，该组件具有控制 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. 有没有更好的方法来获取 Iron-page 的实例，或者 this.$$('iron-pages') 可以吗？

   没关系，但您也可以将id 添加到您的iron-pages 元素。 Polymer 在其本地 DOM 中自动构建静态创建的实例节点的映射，以方便访问常用节点，而无需手动查询它们。在元素模板中使用id 指定的任何节点都存储在id 的this.$ 散列中。 https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#node-finding

3. 为什么当前所选页面的编号不起作用？

   iron-pages 元素未收到其selected 属性已更改的通知。但是，您应该在元素上声明 selected 属性，而不是依赖它。因此，当my-carousel 的selected 属性发生变化时，<iron-pages selected="{{selected}}" id="pages"> 这一行将通知iron-pages 元素更改页面。

4. 为什么单击页码不起作用？

   在onclick 之后添加$ 符号实际上会使其工作（onclick$="Your code"）。但请不要那样做。请改用带注释的事件侦听器。

请参考我的 jsbin 答案，以便您了解 Polymer 领域的工作原理。