Question

我正在尝试按下按钮上的URL栏，并循环浏览标记数组中声明的JSON对象。

当window.location.href = "http://localhost:777/tag/" + this.tag[this.counter];行被注释掉时，迭代器工作正常，但当此行处于活动状态时，它会卡在第一个数组项上。

我认为在刷新页面时会重置counter。是否有一种保存counter状态的好方法，以便在URL更改时循环访问数组？

<template>
        <paper-button class="menu-button" on-tap="leftArrowButton">Button Text</paper-button>
</template>

<script>
    Polymer({

        is: 'sub-menu',

        properties: {
            tag: {
                type: Array,
                value: function () {
                    return ['one', 'two', 'three', 'four'];
                }
            },
            counter: {
                type: Number,
                value: 0
            }
        },

        leftArrowButton: function (e) {
            this.counter = (this.counter + 1) % this.tag.length;
            console.log(this.counter);
            console.log(this.tag.length);
            console.log(this.tag[this.counter]);
            console.log("http://localhost:777/tag/" + this.tag[this.counter])
            window.location.href = "http://localhost:777/tag/" + this.tag[this.counter];
        }
    });
</script>

Answer 1

您需要一台路由器来管理您的应用在页面之间的状态。查看app-route。它由Polymer团队构建为＆＃34; Web组件＆＃34;路由方法。

Answer 2

使用您的链接将重新加载页面并重置计数器。您可能希望在您的网址中使用hashbang，例如http://localhost:777/tag#one或查询http://localhost:777/tag?choice=one等参数。 Prior会阻止页面加载，后者不会让你解析链接（见下文）。

如果没有选项改变链接结构，你可以从leftArrowButton中的location.pathname读取当前选中的选项，计算相应tag条目的索引，选择下一个并用它构建你的链接：

leftArrowButton: function (e) {
var current = location.href.substr(location.href.lastIndexOf('/') + 1);
var index = this.tag.indexOf(current);
var counter = (index + 1) % tags.length;
...

聚合物：单击按钮时逐步执行数组

2 个答案: