Получить количество страниц в железных страницах

Я хотел бы показать номер выбранной в данный момент страницы и количество всех страниц в железных страницах (например, "страница 1 из 100").

Получить первое легко, так как вы можете искать selected-changed событие. Для последнего я понятия не имею, как его получить. Я собирался получить количество дочерних элементов в iron-pagesно это не кажется надежным.

Источник

1 ответ

Решение

Что вы можете сделать, это убедиться, что каждая страница имеет соответствующий номер в качестве атрибута. Вы можете получить количество страниц, оценивая дочерние элементы (игнорируя запасную страницу).

Рабочий пример:

<!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>

Источник
Другие вопросы по тегам