polymer - 纸张菜单按钮内的纸张项目链接(Polymer-1.0)

Question

更新 1 : 找到 this issue with pull request这似乎正在解决 Polymer 中的这个问题。

更新 2 : 决定根据 Polymer Starter Kit 重构我的布局它使用 page.js 而不是 app-router，并且似乎运行良好，尽管它们在 paper-menu 中不使用 paper-item 而是使用自定义 anchor 元素。

搜索所有文档，但我找不到这个(尽管 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>

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

来自应用路由器文档:

go(path, options) - You can call the router from Javascript to navigate imperatively.

然后你就可以简单的自己写 标签处理程序并在每个 <paper-item> 上使用自定义属性( mypath )

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