需要在单击按钮时导航到 Polymer 数组中的下一个元素

Question

我有一个包含 emp 信息（如姓名、年龄等）的对象数组，并且我有一个包含上一个和下一个按钮的页面。单击下一步按钮后，我希望能够导航到数组中的对象。我是否需要使用 redux 之类的东西来实现这一点，或者是否有其他方法可以做到这一点。有没有办法直接在聚合物中做到这一点。

<dom-module id="my-quiz">
    <template>
        <div>Employee List</div>
            <button on-click="prev">Previous</button>
            <button on-click="next">Next</button>
    </template>
    <script>
        class Quiz extends Polymer.Element {
            static get is() { return 'my-quiz'; }

            // set this element's employees property
            constructor() {
                super();
                this.employees = [
                    { name: 'Bob', id: 'b1' },
                    { name: 'Ayesha', id: 'b2' },
                    { name: 'Fatma', id: 'b3' },
                    { name: 'Tony', id: 'b5' }
                ];
            }

            prev() {
                console.log("prev");
            }

            next() {
                console.log("next");
            }

        }
        window.customElements.define(Quiz.is, Quiz);
    </script>
</dom-module>

Answer 1

这里是一个如何做到这一点的例子。也可能有其他方法。 :

<div>Employee ID: [[_calculateId(index)]] Name: [[_calculateName(index)]]</div>
<button on-click="prev">Previous</button>
<button on-click="next">Next</button>on>

</template>
<script>
class MyTest extends Polymer.Element {
      static get is() { return 'my-test'; }
      static get properties() { return { 
            index:{
               type:Number,
               value:0
            }
          }} 
                 // set this element's employees property
            constructor() {
                super();
                this.employees = [
                    { name: 'Bob', id: 'b1' },
                    { name: 'Ayesha', id: 'b2' },
                    { name: 'Fatma', id: 'b3' },
                    { name: 'Tony', id: 'b5' }
                ];
            }

           _calculateName(i) { return this.employees[i].name }
           _calculateId (i) { return this.employees[i].id }
            prev() {
                console.log("prev");
                if (this.index>0) { this.index -= 1 }

            }

            next() {
                console.log("next");
                if (this.index < this.employees.length-1){this.index +=1}

            }
 }
customElements.define(MyTest.is, MyTest);

Demo

需要在单击按钮时导航到 Polymer 数组中的下一个元素

Need to navigate to next element in an array in Polymer on button click

polymer