聚合物自定义组件，用于控制铁页

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，输出

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

• 上一个/下一个链接
• 总页数指示器

我的问题如下 ：

1. onclick属性看起来很难看。 有适当的方法来做到这一点吗？
2. 有没有更好的方法来获取iron-page的实例，或者this.$$('iron-pages')可以吗？
3. 为什么当前所选页面的编号不起作用？
4. 为什么单击页码不起作用？

Answer 1

此处： http ： //jsbin.com/sesope/edit？html，输出

1. onclick属性看起来很难看。 有适当的方法来做到这一点吗？

   带注释的事件侦听器。 https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners

2. 有没有更好的方法来获取Iron-Page的实例，或者这是$。$$（'iron-pages'）可以吗？

   可以，但是您也可以在iron-pages元素中添加id 。 Polymer会自动在其本地DOM中构建静态创建的实例节点的映射，以提供对常用节点的便捷访问，而无需手动查询它们。 在元素与模板中指定的任何节点id存储在this.$通过哈希id 。 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领域的工作方式。