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

[前回](http://qiita.com/kazusa-qooq/items/8f0072311742f99d6fcf)に続いて次世代のJavascriptフレームワークらしいAureliaのGet-startedを試していきます。とりあえずGet-startedは今回でラストです。

##Bonus: Creating a Custom Element
* ナビゲーションをカスタムタグ<nav-bar>にします
* 最終的には以下のようにカスタムタグを使用します

``` 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を選択するたびに再帰的に画面が構築されます。

![image](https://qiita-image-store.s3.amazonaws.com/0/71988/3292cd04-1baf-548c-d6ed-33cc8b255fa0.png)

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


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