Question

我正在尝试使用app-location来动态加载包含其他文章链接的文章，并且能够使用浏览器导航在它们之间来回切换，就像在普通网站上一样。我对app-location的理解是它抓取从链接发送到浏览器的URL并更新其路由值，允许您执行客户端路由。这是我的第一个测试“文章”，加载很好：

<h1>Title header</h1>

<p>Here's a bunch of words and this one's <b>special</b></p>

<a id="content-link" href="/articles/test2.txt" on-tap="handleTap">link to another article</a>

test2.txt只有一个p标签，里面有一些文字。

这就是初始加载时的样子。主要部分底部的链接是我正在谈论的链接。我的意图是，如果我点击该链接，它将更改网址，然后app-location将获取并更改其路由属性，然后我的观察者可以清除旧的“文章”，加载新的文章并将其插入到内容中区域。所以，因为加载了一个“新页面”，我应该能够点击浏览器返回按钮返回上一页。

但是，当我点击链接时，它只是将文件作为原始文本文件加载并显示：<p>A NEW PAGE GOT LOADED WOOOOOO</p>，包含p标签。显然，我误解了一些事情，这可能是因为我对Polymer来说还是一个新手，这本来是一个学习项目。任何人都可以在这里找到我做错了什么，或者指点一下我应该做些什么来让我的想法发挥作用？

这是我的完整元素代码：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../../bower_components/app-route/app-*">

<dom-module id="AR_Website-app">
  <template>
    <style>
      /*header*/
      header {
        display: block;
        padding: 20px 0;
        padding-left: 30px;
        background-color: rgb(220, 60, 50);
      }

      p {
        margin: 0;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 30px;
        animation: title-fadein 1s;
        animation-fill-mode: forwards;
      }

      @keyframes title-fadein {
        from {
          text-shadow: none;
          opacity:0;
        }

        to{
          text-shadow: 0 0 2px black;
          opacity:1;
        }
      }

      /*content*/
      table {
        border-collapse: collapse;
        width: 100%;
        min-height: calc(100vw - 110px);
      }

      table td {
        vertical-align: top;
        padding: 0;
      }

      table td:nth-child(1) {
        background-color: blue;
      }

      table td:nth-child(2) {
        background-color: green;
        padding: 10px;
      }

      table td:nth-child(3) {
        background-color: red;
      }
    </style>

    <app-location route="{{route}}"></app-location>
    <app-route 
      route="{{route}}" 
      pattern="/:articles" 
      data="{{routeData}}" 
      tail="{{subroute}}">
    </app-route>

    <iron-ajax url="{{route}}" handle-as="text" on-response="handleRequest"></iron-ajax>

    <header><p>The Title</p></header>
    <table>
      <tr>
        <td width="10%"><div id="left-banner">

        </div></td>
        <td width="80%">
          <div id="content">

          </div>
        </td>
        <td width="10%"><div id="right-banner">

        </div></td>
      </tr>
    </table>
  </template>

  <script>

    Polymer({

      is: 'AR_Website-app',


      observers: [
        '_routeChanged(route)'
      ],

      attached: function (){
        this.route = "/articles/test.txt"
        //console.log("Page loaded, sending request for route "+this.route)
        this.$$('iron-ajax').generateRequest();
      },

      _routeChanged: function(route) {
        console.log("new route "+route+", sending request")
        this.$$('iron-ajax').generateRequest();
      },

      handleRequest: function(event) {
        //Remove existing html snippet
        console.log("handling request")
        while (this.$$('#content *') != null){
          this.$$('#content').removeChild(this.$$('#content *'))
        }
        //Create new html code from received text
        console.log(event.detail.response)
        var div = document.createElement('div')
        div.innerHTML = event.detail.response
        for (x = 0; x < div.childNodes.length; x++){
          var content = div.childNodes[x]
          this.$$('#content').appendChild(content)
        }
        //Add event handlers for links
        //this.listen(this.$$('#content-link'), 'tap', 'handleTap')
      },

      handleTap: function(event) {
        //Cancel page load from link
        //event.preventDefault();
        //Request new html snippet
        console.log("Loading "+this.$$('#content-link').href)
        //this.set('route', this.$$('#content-link').href)
        this.route = this.$$('#content-link').href
        //this.$$('iron-ajax').generateRequest();
      }
    });
  </script>
</dom-module>

Answer 1

根据您的代码

App目录

app
- bower_components
- articles
-- a.txt
-- b.txt
- index.html
- my-app.html

的index.html

<!doctype html>
<html>
  <head>

    <link rel='import' href='my-app.html'>

  </head>
  <body>

    <my-app></my-app>

  </body>
</html>

MY-app.html

<link rel='import' href='bower_components/polymer/polymer.html'>
<link rel='import' href='bower_components/app-route/app-location.html'>
<link rel='import' href='bower_components/app-route/app-route.html'>
<link rel='import' href='bower_components/iron-ajax/iron-ajax.html'>

<dom-module id='my-app'>
  <template>

    <style>
      header{display:block;padding:20px 0 20px 30px;background-color:#dc3c32}p{margin:0;font-family:Verdana,Geneva,sans-serif;font-size:30px;animation:title-fadein 1s;animation-fill-mode:forwards}@keyframes title-fadein{from{text-shadow:none;opacity:0}to{text-shadow:0 0 2px #000;opacity:1}}table{border-collapse:collapse;width:100%;min-height:calc(100vw - 110px)}table td{vertical-align:top;padding:0}table td:nth-child(1){background-color:#00f}table td:nth-child(2){background-color:green;padding:10px}table td:nth-child(3){background-color:red}
    </style>

    <app-location route='{{route}}'></app-location>
    <app-route
      route='{{route}}'
      pattern='/articles/:article'
      data='{{routeData}}'>
    </app-route>
    <iron-ajax url='/articles/[[routeData.article]]' handle-as='text' on-response='handleRequest'></iron-ajax>

    <header>
      <p>The Title</p>
    </header>
    <table>
      <tr>
        <td width='10%'><div id='left-banner'></div></td>
        <td width='80%'>
          <div id='content'>
            <div>[[article]]</div>
            <a href='/articles/a.txt'>a article</a>
            <a href='/articles/b.txt'>b article</a>
          </div>
        </td>
        <td width='10%'><div id='right-banner'></div></td>
      </tr>
    </table>

  </template>
  <script>

    Polymer({
      is: 'my-app',

      observers: [
        'routeChanged(route)'
      ],

      routeChanged: function (route) {
        if (this.$$('app-route').active)
          this.$$('iron-ajax').generateRequest();
      },

      handleRequest: function (event) {
        this.article = event.detail.response;
      }
    });

  </script>
</dom-module>

从app-location抓取网址开始，更新route，这将触发app-route，app-route尝试将该网址与模式匹配并将结果设置为{{ 1}}，routeData上的url会相应更改。

当您点击iron-ajax时，网址会在不重新加载的情况下发生变化，因为当a href处于有效状态时，它会截取您网站中的链接点击次数see in links section和iron-location使用{{ 1}}）所以你不需要app-location的任何东西。之后将触发iron-location并生成请求。

旁边，我看到你使用

a href

我认为应该是

routeChanged

我希望这会有所帮助。

聚合物，如何使用app-location？

1 个答案: