如何在基于URL的聚合物元素上执行select()方法？

Question

我有一个纸质菜单 links

<paper-menu>
  <a href="/home">Home</a>
  <a href="/about">About</a>
</paper-menu>

当我单击任何 link 时，Polymer 会向其添加一个 .iron-selected CSS class，但是如果发生页面重新加载或页面重定向，我会丢失 CSS class.

我的问题是：Polymer 如何在 URL 的基础上添加 class？

Answer 1

你可以看到一个工作示例here

当您转到页面 "cekuda" 时，选择了 cekuda 菜单项，当您转到页面 "jegano" 时，jegano 菜单项被选中。

使用全局变量"location"检查页面url。
等待 "WebComponentsReady" 事件触发，然后再尝试对 paper-menu 执行任何操作。
通过paper-menu.items
将 class 添加到要使用 paper-menu.select

Answer 2

感谢 Ryan 的提示！

我的解决方案是：

document.addEventListener('WebComponentsReady', function(){
    var menu = document.querySelector('paper-menu')
    var paths = menu.items.map(function(item){
        return item.pathname
    })
    window.setInterval(function () {
        menu.select(paths.indexOf(location.pathname))
    }, 100);
})

如何在基于URL的聚合物元素上执行select()方法？

How to execute select() method on polymer elements based on URL?

javascript

html

css

polymer

paper-elements