Polymer 1.0 - routing

15
votes

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?

6
polymer

6 Answers

26
votes

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!

8
votes

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.

2
votes

Try using 'dna-router'. Its relatively new and supports Polymer-1.0. You can create routing purely in html.

Dna-router also supports user-authentication. You can pass login status and loggedin data in its 'dna-config' element. Router will show page based on login status. You can declare which states need user authentication.

Its still under development and have some glitches in it. But worth giving a try.

Github: https://github.com/Saquib764/dna-router/

2
votes

The answer depends on the kind of router you use. I was unhappy with the state of Polymer routers, so I wrote excess-router. With this router, you would:

  • define your routes, and make /content is a default route
  • configure router to be started manually
  • start the router manually on signin
<excess-router-config manual-start></excess-router-config>
<excess-route route="/content"></excess-route>
<excess-route route="/(.*)" redirect-to="/content" activation-modifiers="x"></excess-route>

<script>
  function onSignedIn() {
    Excess.RouteManager.start();
  }
</script>
1
votes

I solving this problem just adding in page template this code:

<script>
    Polymer({
        is: 'home-page'
    });
</script>

Full page code:

<link href="../bower_components/polymer/polymer.html" rel="import">
<dom-module id="home-page">
   <template>
      <div>Home page</div>
   </template>

   <script>
      Polymer({
         is: 'home-page'
      });
   </script>
</dom-module>
1
votes

As of Polymer 1.4, carbon-route (later renamed app-route) can be used:

Here's an example taken from the polymer blog:

<carbon-location route="{{route}}">
</carbon-location>

<carbon-route route="{{route}}" pattern="/tabs/:tabName" data="{{data}}">
</carbon-route>

<paper-tabs selected="{{data.tabName}}" attr-for-selected="key">
  <paper-tab key="foo">Foo</paper-tab>
  <paper-tab key="bar">Bar</paper-tab>
  <paper-tab key="baz">Baz!</paper-tab>
</paper-tabs>

<neon-animated-pages selected="{{data.tabName}}"
                     attr-for-selected="key"
                     entry-animation="slide-from-left-animation"
                     exit-animation="slide-right-animation">
  <neon-animatable key="foo">Foo Page Here</neon-animatable>
  <neon-animatable key="bar">Bar Page Goes Here</neon-animatable>
  <neon-animatable key="baz">Baz Page, the Best One of the Three</neon-animatable>
</neon-animated-pages>

See also similar question: Routing in polymer 1.0