链接纸质菜单按钮（Polymer-1.0）中的纸张项目

Question

更新1 ：找到了this issue with pull request，似乎在Polymer中解决了这个问题。

更新2 ：决定根据使用page.js而不是app-router的Polymer Starter Kit来重构我的布局，虽然它们不使用纸张，但似乎效果很好-item在纸张菜单中，而是使用自定义锚元素。

搜索每一个文档，但我找不到这个（尽管another issue on stackoverflow的标题几乎相同，不一样）

TLDR：我需要将整个文章项目点击链接。不只是文本本身。为清晰起见，请参见下图，此处为live code。

我有类似下面的代码。我正在使用链接标记与app-router路由相结合，效果很好。唯一的问题是：我希望整个纸质菜单项可以通过链接标签进行点击。

当我使用下面的代码时，直接单击链接tekst本身时会检索右页，但这不会创建“选定”状态。当我点击按钮（刚刚离开文本）然后选择了按钮但是没有检索到页面，因为我没有点击链接......

必须有一个简单的方法来做到这一点吗？我的意思是，我可以通过覆盖所有CSS来强制这一点，但在我看来，纸质菜单中的纸质项目中的链接是一个非常常见的事情，应该自动执行此操作还是使用属性或某些功能？

<paper-menu class="list">
  <paper-item icon="home" label="Home" ><a is="pushstate-anchor" href="/">Home</a></paper-item>
  <paper-item icon="polymer" label="Demo"><a is="pushstate-anchor" href="/demo">Demo</a></paper-item>
</paper-menu>

我检查了纸质项目，纸质菜单和其他文档，但是那些从未使用带链接的示例。

Answer 1

IMO，最干净的方法是完全放弃链接，只添加点击事件。

（您也可以使用 dom-repeat 作为菜单）

<paper-menu class="list">
  <paper-item icon="home" label="Home" on-tap="menuSelected" mypath="/">Home</paper-item>
  <paper-item icon="polymer" label="Demo" on-tap="menuSelected" mypath="/demo">Demo</paper-item>
</paper-menu>

由于app-router，我假设您正在使用<a>代码。

来自app-router doc：

  

go（路径，选项） - 您可以通过Javascript调用路由器来强制导航。

然后，您可以简单地编写自己的 on-tab 处理程序，并在每个<paper-item>

上使用自定义属性（ mypath ）

Polymer({
    is: 'your-menu',
    menuSelected: function (e) {
        var mypath = e.currentTarget.getAttribute('mypath'); 
        document.querySelector('app-router').go(mypath);
    },
})();

Answer 2

为每个锚标记添加class="flex"。