AureliaのGet-startedを試してみる（３ #JavaScript

前回に続いて次世代のJavascriptフレームワークらしいAureliaのGet-startedを試していきます。とりあえずGet-startedは今回でラストです。

Bonus: Creating a Custom Element

ナビゲーションをカスタムタグにします
最終的には以下のようにカスタムタグを使用します

app.html

<template>
  <require from='./nav-bar'></require>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

まずnav-bar.jsとnav-bar.htmlを作成します

nav-bar.js

import {Behavior} from 'aurelia-framework';

export class NavBar {
  static metadata(){ return Behavior.withProperty('router'); }
}

exportしたクラス(NavBar)がタグ(nav-bar)として使用されます
metadata()は、タグが使用するプロパティをフレームワークに通知します。その他にもタグ名を指定したりできます

nav-bar.html

<template>
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <i class="fa fa-home"></i>
        <span>${router.title}</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
          <a href.bind="row.href">${row.title}</a>
        </li>
      </ul>

      <ul class="nav navbar-nav navbar-right">
        <li class="loader" if.bind="router.isNavigating">
          <i class="fa fa-spinner fa-spin fa-2x"></i>
        </li>
      </ul>
    </div>
  </nav>
</template>

以前にapp.htmlに直書きしたものとほとんど同じです

app.html（再掲）

<template>
  <require from='./nav-bar'></require>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>

<require from='./nav-bar'></require>でnav-barを読み込みます
<nav-bar router.bind="router"></nav-bar>で読み込んだnav-barを使用します
router.bind="router"でapp.jsのrouterをnav-barに引き渡します

成功してれば以前と同様の画面が表示されます。

Bonus: Leveraging Child Routers

親ルータに対して相対的に働く子ルータの使い方を学びます
3枚目のページを作成するために、ルーティングを追加します

app.js

      config.map([
        { route: ['','welcome'], moduleId: './welcome', nav: true, title:'Welcome' },
        { route: 'flickr', moduleId: './flickr', nav: true },
        { route: 'child-router',  moduleId: './child-router', nav: true, title:'Child Router' }
      ]);

child-routerを作成します。

child-router.js

import {Router} from 'aurelia-router';

export class ChildRouter{
  static inject() { return [Router]; }
  constructor(router){
    this.heading = 'Child Router';
    this.router = router;
    router.configure(config => {
      config.map([
        { route: ['','welcome'],  moduleId: './welcome',      nav: true, title:'Welcome' },
        { route: 'flickr',        moduleId: './flickr',       nav: true },
        { route: 'child-router',  moduleId: './child-router', nav: true, title:'Child Router' }
      ]);
    });
  }
}

child-router.html

<template>
  <section>
    <h2>${heading}</h2>
    <div>
      <div class="col-md-2">
        <ul class="well nav nav-pills nav-stacked">
          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
            <a href.bind="row.href">${row.title}</a>
          </li>
        </ul>
      </div>
      <div class="col-md-10" style="padding: 0">
        <router-view></router-view>
      </div>
    </div>
  </section>
</template>

ここでは子ルータは親と同様のルーティングにしてます
実際に使用することはないと思いますが、こんなこともできるという例です

成功していれば、以下のようにChild Routerを選択するたびに再帰的に画面が構築されます。

Conclusion

Aureliaはアプリケーションのみならず、開発者に開発の楽しさを提供します。
煩雑な設定や定型コードを書くことなくアプリケーション開発に集中できるでしょう

以上でGet-Startedは終了となります。
表示に時間がかかるのはjspmのライブラリ読み込み待ちのようです。jspmにはプロダクション用にビルドする方法もあるようなので、そこまで問題でもないかもしれません。
規約に従えばシンプルに書けるという点は個人的に好きです。
２画面開くとインプットの情報が同期しますが、テキストノードのバインディングは同期しないのは仕様でしょうかね？
こっちのドキュメントも読んでみたいと思います。
https://github.com/aurelia/documentation/blob/master/English/docs.md