0
Kann jemand mit jsBin ein Beispiel für die Verwendung von app-route zeigen?Polymer App-Route Beispiel in jsBin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>Polymer</title>
<script src="https://polygit.org/app-route+polymerelements+*/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/paper-input/paper-input.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/paper-button/paper-button.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/app-route/app-route.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/app-route/app-location.html">
<link rel="import" href="https://polygit.org/app-route+polymerelements+*/components/iron-pages/iron-pages.html">
</head>
<body>
<x-shell></x-shell>
<dom-module id="x-a">
<template>
<h2>page A</h2>
<paper-input value="{{email}}" placeholder="set email"></paper-input>
<paper-input value="{{phone}}" placeholder="set phone"></paper-input>
<paper-button on-click="_submit">submit</paper-button>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-a',
properties: {
email: {
type: String
}
},
_submit: function() {
this.fire('info-updated', {
email: this.email,
phone: this.phone
});
}
});
});
</script>
</dom-module>
<dom-module id="x-b">
<template>
<h2>page B</h2>
<div>
email: [[userInfo.email]]
</div>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-b',
properties: {
email: {
type: String
}
}
});
});
</script>
</dom-module>
<dom-module id="x-shell">
<template>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<iron-selector selected="{{routeData.page}}" attr-for-selected="name" role="navigation">
<a name="x-a" href="#/x-a">x-a</a>
<a name="x-b" href="#/x-b">x-b</a>
</iron-selector>
<iron-pages selected="[[routeData.page]]" attr-for-selected="name">
<x-a name="x-a" route="{{route}}" user-info="[[userInfo]]" on-info-updated="_updateInfo"></x-a>
<x-b name="x-b" route="{{route}}" user-info="[[userInfo]]"></x-b>
</iron-pages>
</template>
<script>
// NOTE: not needed if we declare this element in a separate file and import it.
addEventListener('WebComponentsReady', function() {
Polymer({
is: 'x-shell',
properties: {
userInfo: {
type: Object,
value: function() {
return {};
}
},
page: {
type: String,
reflectToAttribute: true
}
},
_updateInfo: function(event) {
console.log('infoUpdated', event.detail);
this.set('userInfo', event.detail);
}
});
});
</script>
</dom-module>
</body>
</html>
Ich empfehle sehr Polymer-Shop App zu überprüfen. Sie verwenden App-Route und Sie können damit spielen – Dmitry