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

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

唯一似乎有效的是：

Previous/Next 链接
总页数指标

我的问题如下:

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

Answer 1

此处：http://jsbin.com/sesope/edit?html,output

onclick 属性看起来很难看。有没有正确的方法来做到这一点？

Annotated event listeners. https://www.polymer-project.org/1.0/docs/devguide/events.html#annotated-listeners
是否有更好的方法来获取 iron-page 的实例，或者 this.$$('iron-pages') 可以吗？

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
为什么当前选中页的编号不起作用？

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.
为什么点击页码不起作用？

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

请参考我的 jsbin 答案，这样您可能会了解 Polymer 领域的工作原理。

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

Polymer custom component that controls iron-pages

html

javascript

custom-component

web-component

polymer