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

Polymer custom component that controls iron-pages

本文关键字：自定义 组件 聚合物 控制      更新时间：2023-09-26

我正在尝试创建一个自定义的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. 为什么点击页码无效

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

  1. onclick属性看起来很难看。有合适的方法吗？

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

  2. 有没有更好的方法来获取铁页的实例，或者是这样$$（"党内会议"）好吗？

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

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

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

  4. 为什么点击页码无效？

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

请参阅我的jsbin答案，这样你就可以了解聚合物领域的工作原理了。

相关文章：