Menu
I'm new to Polymer. I start writing a simple webapp in which 1. User first land in a login page 2. If user passes login, then direct user to content page
I write an element "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>
On index.html (main page), I use
<self-login
sign-in-success="onSignedIn"
></self-login>
Question: in the onSignedIn() callback, I would route my page to /content. How can I do?
EDIT 1: As @zacharytamas suggest, I try to use app-router as following
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>
It shows a blank page when I browse to both http://localhost:3000/ and http://localhost:3000/test on Chrome. Any idea?
261
Polymer does not have routing built into it by default. There are several front-end routing frameworks you can use with Polymer, however.
A very commonly used approach is a custom element called app-router, which lets you define routes declaratively with just HTML alone. I've had some success with it before. Check out the websitefor information on setting it up.
Another HTML-based way of doing it is a custom element made by a member of the Polymer team called more-routing. Google has a video series about Polymer called Polycasts which made a video explaining the more-routing approach. You should check that video out for info about getting started.
Another option is to do it with JavaScript using the page.js framework. This is the method used the Polymer Starter Kit. Here's another Polycast to get you started on that way.
Welcome to the Polymer world!
59
Good news! The Polymer team has released an official router. An excellent introduction is available on their blog:
https://www.polymer-project.org/1.0/blog/routing
And the Readme.md on the Github repo is quite instructive:
https://github.com/PolymerElements/app-route
There are two elements necessary for basic functionality, <app-location> and <app-route>
The following is a simple example:
<app-location route="{{route}}"></app-location>
<app-route
route="[[route]]"
pattern="/users"
active="{{usersRouteIsActive}}">
</app-route>
In the above example usersRouteIsActive will receive a boolean value, true if the route matches /users, and false if it does not. Simple, right? After this, as your application's routes get more complicated the app-route element has more features that will support those needs.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
