web-dev-qa-db-ja.com

Polymer 1.0-ルーティング

Polymerは初めてです。 1.ユーザーが最初にログインページにアクセスする2.ユーザーがログインに合格した場合は、ユーザーをコンテンツページに誘導する単純なWebアプリケーションを作成します。

「ログイン」という要素を書く

<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>

Index.html（メインページ）では、

<self-login
      sign-in-success="onSignedIn"
      ></self-login>

質問：onSignedIn（）コールバックで、ページを/ contentにルーティングします。どのようにできるのか？

編集1：@zacharytamasが示唆するように、私は次のようにapp-routerを使用しようとします

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>

Chromeで http：// localhost：3000 / と http：// localhost：3000/test の両方を参照すると、空白のページが表示されます。何か案が？

polymer
15
Bao Le

Polymerには、デフォルトではルーティングが組み込まれていません。ただし、Polymerで使用できるいくつかのフロントエンドルーティングフレームワークがあります。

非常に一般的に使用されるアプローチは、 app-router と呼ばれるカスタム要素です。これにより、HTMLだけでルートを宣言的に定義できます。私は以前にある程度の成功を収めたことがあります。設定方法については、 ウェブサイト をご覧ください。

それを行う別のHTMLベースの方法は、 more-routing と呼ばれるPolymerチームのメンバーによって作成されたカスタム要素です。 GoogleはPolymerに関する Polycasts と呼ばれるビデオシリーズを持っています _more-routing_アプローチ 。開始に関する情報については、そのビデオをチェックしてください。

別のオプションは、 page.jsフレームワーク を使用してJavaScriptでそれを行うことです。これは、 Polymer Starter Kit を使用した方法です。 これがあなたがその方法を始めるための別のポリキャスト です。

Polymerの世界へようこそ！

26
zacharytamas

朗報！ Polymerチームが公式ルーターをリリースしました。彼らのブログですばらしい紹介が利用可能です：

https://www.polymer-project.org/1.0/blog/routing

そしてGithubリポジトリのReadme.mdは非常に有益です：

https://github.com/PolymerElements/app-route

基本的な機能に必要な2つの要素、<app-location>と<app-route>があります。

以下は簡単な例です。

<app-location route="{{route}}"></app-location>
<app-route
    route="[[route]]"
    pattern="/users"
    active="{{usersRouteIsActive}}">
</app-route>

上記の例では、usersRouteIsActiveはブール値を受け取り、ルートが/usersと一致する場合はtrueを受け取り、そうでない場合はfalseを受け取ります。シンプルでしょ？この後、アプリケーションのルートがより複雑になるにつれて、app-route要素にはそれらのニーズをサポートする機能が増えます。

8
Eric Knudtson

答えは、使用するルーターの種類によって異なります。 Polymerルーターの状態に不満だったので、 excess-router と書きました。このルーターを使用すると、次のようになります。

  • ルートを定義し、/contentはデフォルトのルートです
  • 手動で起動するようにルーターを構成する
  • サインイン時にルーターを手動で起動する
<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>
2
Aleksandar Totic

「dna-router」を使用してみてください。比較的新しく、Polymer-1.0をサポートしています。純粋にHTMLでルーティングを作成できます。

Dnaルーターは、ユーザー認証もサポートしています。ログインステータスとログインデータを「dna-config」要素で渡すことができます。ルーターはログインステータスに基づいてページを表示します。ユーザー認証が必要な状態を宣言できます。

それはまだ開発中で、いくつかの不具合があります。しかし、試してみる価値はあります。

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

2
codedemon

この問題を解決するには、ページテンプレートに次のコードを追加します。

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

全ページコード：

<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
andreyr82

Polymer 1.4以降）、carbon-route（後で名前がapp-routeに変更）を使用できます。

polymerブログから抜粋した例を次に示します。

<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>

同様の質問も参照してください： ルーティングpolymer 1.

1
AlexO