【发布时间】：2017-06-06 17:13:23
【问题描述】：
我正在尝试使用 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 标签，里面有一些文字。
这就是它在初始加载时的样子。主要部分底部的链接是我正在谈论的链接。我的意图是，如果我单击该链接，它将更改 url，然后 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>
【问题讨论】：
标签： javascript html routing polymer polymer-1.0