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

Question

更新1:发现此问题与pull请求似乎在Polymer中解决了这个问题.

更新2:决定重新构建我的布局基于使用page.js而不是app-router 的Polymer Starter Kit,并且似乎运行良好,虽然他们不在纸质菜单中使用纸质项目,而是使用自定义锚元素.

搜索每一个文档,但我找不到这个(虽然stackoverflow上有另一个问题,几乎相同的标题,不一样)

TLDR:我需要将整个文章项目点击链接.不只是文本本身.为清晰起见,请参见下图,这是实时代码.

.

我有类似下面的代码.我正在使用链接标记与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) - 您可以从 Javascript 调用路由器来强制导航。

然后您可以简单地编写自己的选项卡处理程序并在每个选项卡上使用自定义属性（mypath）<paper-item>

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