首页 文章

如何将纸质按钮链接到另一个聚合物页面？

提问于
浏览 次
0

我从入门工具包模板创建了一个Polymer 2.0应用程序，以便稍微了解一下框架 . 我有 paper-button 应该链接到应用程序的另一个页面 . 但是，我仍然没有想到如何这样做，因为Polymer通过JavaScript动态加载页面而不是浏览器只是调用另一个 .

我还注意到其他一些奇怪的事情：当我单击 app-drawer 中的链接时，页面会自动更改，并且我的浏览器选项卡中的URL正在更新 . 但是，当我在地址栏中使用新URL点击刷新时，由于URL不存在，我收到404错误 . 那么有什么方法可以解决这个问题并将我的按钮链接到另一个页面？

这是我的按钮：

<paper-button id="buttonStartQuiz" on-click="startQuiz">
    go! <iron-icon icon="chevron-right"></iron-icon>
</paper-button>

这是与布局对应的JavaScript类：

class MyView1 extends Polymer.Element {

    static get is() { return 'my-view1'; }

    /* This method is the listener for the button click */
    startQuiz(e) {
        // Found this on a website, but doesn't work
        this.set('route.path', '/view-question');
    }

}

window.customElements.define(MyView1.is, MyView1);

我不知道它是否有用，但如果你需要知道，这里是我的进口 .

<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
javascript html html5 polymer polymer-2.x

1 回答

  • 0

    事实上，聚合物不这样做，一些元素（用Polymer实现的 app-route ）就是这样做的 . Polymer本身就是帮助您更轻松地使用_2822959的库 .

    此行为由JavaScript和History API完成 . 了解如何在mdn上使用它 . 像这样的应用程序，动态地重写当前页面而不是加载整个新页面，称为单页面应用程序（SPA） .

    基本上这样的应用程序只有一个页面（ index.html ） . 当您尝试从另一个路径加载时，服务器将无法找到它 .

    您可以通过将服务器配置为为 index.html 使用的每个路径提供服务来解决此问题 . 对于开发，您可以轻松地使用来自polymer-cli的 polymer serve 命令，请参阅here .

    要链接到另一个页面，您可以通过多种方式完成：

    =>用 <a> 包裹你的元素：

    <a href='/another-page'>
  <paper-button>...</paper-button>
</a>

    =>从 app-location ：在my-app.html中更改 route 变量

    <app-location route='{{route}}'></app-location>
...
<paper-button on-click='changeRoute'>...</paper-button>

class MyApp extends Polymer.Element {
  ...
  changeRoute () {
    this.set('route.path', '/another-page')
  }
  ...
}

    如果要在文件中执行此操作，只需导入并使用 app-location .

    =>使用历史记录API

    window.history.pushState({}, null, '/another-page');
// Notify to `app-location`
window.dispatchEvent(new CustomEvent('location-changed'))
    回复于

相关问题