控制熨斗頁面的聚合物自定義組件

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. 有沒有更好的方法來獲取iron-page的實例，或者是。$$（'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的答案，所以你可能有一個想法的東西在聚合物的土地是如何工作的。