アイアンページのページ数を取得

現在選択されているページの番号とアイアンページのすべてのページの番号（「ページ1の100」など）を表示したいとします。アイアンページのページ数を取得

前者を取得するのは、selected-changedイベントを探すのが簡単です。後者のために私はそれをどうやって得るのか分かりません。私はiron-pagesに子要素の数を考えていましたが、それは信頼できるとは思われません。

2017-11-29 pbm

できることは、すべてのページに属性として対応する番号が付いていることを確認することです。子要素を評価することでページ数を得ることができます（フォールバックページを無視します）。

作業例：あなたはあなたのコードを投稿することができます試してみました何

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <base href="//polygit.org/components/"> 
 
    <script src="webcomponentsjs/webcomponents-lite.js"></script> 
 
    <link rel="import" href="polymer/polymer.html"> 
 

 
    <link rel="import" href="iron-pages/iron-pages.html"> 
 

 

 
    <dom-module id="example-component"> 
 
     <template> 
 
      <style> 
 
       :host { 
 
        display: block 
 
       } 
 
      </style> 
 

 
      <input value="{{pageName::input}}" placeholder="Type a page name here."> 
 

 
      <iron-pages id="ironPages" selected="[[pageName]]" attr-for-selected="page-number" fallback-selection="fallback"> 
 
       <div page-number="1">One</div> 
 
       <div page-number="2">Two</div> 
 
       <div page-number="3">Three</div> 
 
       <div page-number="fallback"> 
 
        Change pages by typing '1', '2', or '3' in the input above. 
 
       </div> 
 
      </iron-pages> 
 

 
      <div id="pageNumbering">Page [[currentPage]] of [[totalPages]]</div> 
 

 
     </template> 
 

 
     <script> 
 
      class ExampleComponent extends Polymer.Element { 
 
       static get is() { 
 
        return 'example-component'; 
 
       } 
 
       static get properties() { 
 
        return { 
 
         currentPage: { 
 
          type: Number, 
 
          value: 0, 
 
         }, 
 
         totalPages: { 
 
          type: Number, 
 
          value: 0, 
 
         } 
 
        }; 
 
       } 
 

 
       connectedCallback() { 
 
        super.connectedCallback(); 
 
        // fallback doesn't count 
 
        this.totalPages = this.$.ironPages.children.length - 1; 
 
        this.addEventListener('iron-select', this._onPageChanged); 
 
       } 
 

 
       _onPageChanged() { 
 
        let currentPage = this.$.ironPages.selectedItem.getAttribute('page-number'); 
 

 
        if (currentPage == "fallback") { 
 
         this.$.pageNumbering.hidden = true; 
 
        } 
 

 
        if (currentPage <= this.totalPages) { 
 
         currentPage = parseInt(currentPage); 
 
         this.set('currentPage', currentPage); 
 
         this.$.pageNumbering.hidden = false; 
 
        } 
 
       } 
 

 
      } 
 

 
      customElements.define(ExampleComponent.is, ExampleComponent); 
 
     </script> 
 
    </dom-module> 
 

 
</head> 
 

 
<body> 
 
    <example-component></example-component> 
 
</body> 
 

 
</html>

出典

2017-12-02 21:26:49 Elar

アイアンページのページ数を取得

答えて

関連する問題