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

Question

更新 1：发现 this issue with pull request 似乎正在解决 Polymer 中的这个问题。

更新 2：决定基于 Polymer Starter Kit 重构我的布局，它使用 page.js 而不是 app-router，并且似乎运行良好，尽管他们不使用 paper-item在纸质菜单中，而是使用自定义锚元素。

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

TLDR：我需要整个文件项都可以点击链接。不仅仅是文字本身。为清楚起见，请参见下图，这里是live code。

.

我有类似下面的代码。我将链接标签与应用路由器路由结合使用，效果很好。唯一的问题是：我希望整个纸质菜单项都可以使用链接标签进行点击。

当我使用下面的代码时，直接单击链接 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>

我假设您正在使用 <a> 标签，因为 app-router。

来自应用路由器文档：

go(path, options) - 您可以从 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" 添加到每个锚标记。