Polymer 1.0 - enrutamiento
Soy nuevo en Polymer. Comienzo a escribir una aplicación web simple en la que 1. El usuario primero aterriza en una página de inicio de sesión 2. Si el usuario pasa el inicio de sesión, luego dirige al usuario a la página de contenido
Escribo un elemento "login"
<dom-module id="login">
<template>
<!-- local DOM for your element -->
<p>Username</p>
<input class="paper-font-body2" value="{{email::change}}" type="email">
<br/>
<p>Password</p>
<input class="paper-font-body2" value="{{password::change}}" type="password">
<p>{{errorMessage}}</p>
<iron-ajax
id="ajax"
url=""
method="POST"
on-response="signInResponse"
debounce-duration="300">
</iron-ajax>
<button on-click="signIn">Signin</button>
</template>
</dom-module>
<script>
// element registration
Polymer({
is: "login",
// add properties and methods on the element's prototype
properties: {
// declare properties for the element's public API
email: {
type: String,
value: "username"
},
password: {
type: String,
value: "password"
},
errorMessage: {
type: String,
value: ""
}
},
signIn: function() {
this.$.ajax.url = "http://myserver/login/email";
this.$.ajax.params = {"email":this.email, "password": this.password};
this.$.ajax.generateRequest();
},
signInResponse: function(request) {
response = request.detail.response;
console.log(response);
if (response.code == '0') {
this.fire("signin-success", response);
} else {
this.fire("signin-fail", response);
}
}
});
</script>
En index.html (página principal), uso
<self-login
sign-in-success="onSignedIn"
></self-login>
Pregunta: en la devolución de llamada onSignedIn (), enrutaría mi página a / content. ¿Como lo puedo hacer?
EDITAR 1: como sugiere @zacharytamas, trato de usar el enrutador de aplicaciones de la siguiente manera
index.html
<!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.0, user-scalable=yes">
<title>app-router</title>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="stylesheet" href="styles/main.css" shim-shadowdom>
<link rel="import" href="../bower_components/app-router/app-router.html">
</head>
<body unresolved>
<app-router>
<app-route path="/" import="/elements/home-page.html"></app-route>
<app-route path="/test" import="/elements/home-page.html"></app-route>
<app-route path="*" import="/elements/not-found-page.html"></app-route>
</app-router>
<script src="scripts/app.js"></script>
</body>
</html>
home-page.html
<dom-module id="home-page" noscript>
<template>
<h2>Hello</h2>
</template>
</dom-module>
Muestra una página en blanco cuando busco amboshttp: // localhost: 3000 / yhttp: // localhost: 3000 / prueba en Chrome ¿Alguna idea?