我正在尝试使用应用程序位置来动态加载带有其他文章链接的文章，并能够使用浏览器导航在它们之间来回移动，就像在普通网站上一样。我对 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，然后应用程序位置将获取该链接并更改其路由属性，然后我的观察者可以清除旧的“文章”，加载新的文章并将其插入到内容中区域。因此，由于加载了“新页面”，我应该能够点击浏览器后退按钮返回到上面的页面。
但是，当我单击该链接时，它只是将文件作为原始文本文件加载并显示:<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>
最佳答案
基于您的代码
应用程序目录
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开始抓取url，更新route，这将触发app-route，app- route 尝试将该 url 与模式匹配，并将结果设置为 routeData，iron-ajax 上的 url 将相应更改。
当您点击 a href 时，url 将更改而无需重新加载，因为当 iron-location 处于事件状态时，它将拦截对您网站内链接的点击(see in links section 和 app-location 使用 iron-location)，因此您不需要使用 a href 进行任何操作。之后 routeChanged 将被触发并生成请求。
另外，我看到你用了
this.route = 'some path';
我觉得应该是
this.set('route.path', 'some path');
我希望这会有所帮助。
关于javascript - Polymer，如何使用应用程序定位？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41785254/