0
私はapp-locationを使って他の記事へのリンクを動的にロードし、通常のウェブサイトと同じようにブラウザのナビゲーションを使って前後に移動することができます。 app-locationについての私の理解は、リンクからブラウザに送信されたURLを取得し、そのルート値を更新し、クライアント側のルーティングを実行できるようにすることです。ポリマー、app-locationの使い方は？
<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にとってまだ新しいので、これは学習プロジェクトのためのものでした。誰でも私がここで間違っていたことを見つけることができますか、私の考え方を変えるために何をすべきかについて私に指摘してもらえますか？
ここに私の完全な要素のコードがあります：あなたのコード
アプリケーションディレクトリ
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>
私-app.htmlに基づいて
<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>
ああ、私は変更のほとんどを理解していると思う。routeChangedでは 'this。$$（ 'app-route'）.active'を条件としています。 '.active'とは何ですか？ – ViggyNash
パターンが一致していれば真となります。 [ここ]（https://elements.polymer-project.org/elements/app-route#property-active）を参照し、[こちら]（https://github.com/PolymerElements/app-route/issues？）に注意してください。 utf8 =％E2％9C％93＆q =アクティブ）。 –