Aureliaのdocs.mdに書いてある機能を試す(2) #Aurelia

引き続き、docs.md に記載の機能を試していきます。また、調べている最中に見つけたAureliaのContact Listサンプル、コミッタのMatthewさんから教えてもらったAureliaとSassを組み合わせて使う方法についても記載します。

プラグイン

Aureliaにはプラグインの仕組みがあります。といっても、installという名前の関数をexportするだけでいいので、非常に簡単に作成できます。プラグインにはカスタムエレメントやカスタム属性を含めることができるので、汎用的なコンポーネントを切り出して単独で管理するのにもってこいです。

プラグインのスケルトンがあるので、これをskeleton-navigatorに組み込んで見ましょう。単にHello, World! と表示するだけの簡単なカスタムエレメントを定義しているプラグインです。

jspmによるインストール

package.json の、 jspm.dependencies エントリに、下記を追加します。

  "jspm": {
    "dependencies": {
      //...
      "skeleton-plugin": "github:aurelia/skeleton-plugin@master"
      // ...
    }
  }

追加したら、jspm install を実行。skeleton-plugin が読み込まれます。

skeleton-pluginのindex.js では、aurelia.globalizeResources を呼び出して、<hello-world> カスタムエレメントをグローバルに見えるようにしています。これにより、どのビューでもこのカスタムエレメントを使うことができます。

index.js

export function install(aurelia){
  aurelia.globalizeResources('./hello-world');
}

このプラグインを読み込むためには、アプリケーションのエントリポイント(skeleton-navigatorでは、animation-main.js) で、pluginメソッドを呼び出す必要があります。

animator-main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-animator-css')
    .plugin('skeleton-plugin'); // ココ

  aurelia.start().then(a => a.setRoot('app', document.body));
}

では、追加されたカスタムエレメントを使ってみましょう。試しに src/welcome.html の最下段に追加してみます。

  ...
    </section>
    <hello-world>
    </hello-world>
</template>

こんな感じで動作するのがわかります。

Aureliaのサンプル : app-contacts

Aureliaのサンプルというと skeleton-navigator ですが、もう一つのサンプルとしてapp-contactsというのがありました。

簡単なコンタクトリストサンプルですが、リストと詳細が同期して動作します。リストを選択した時の動きはRouterで、詳細を更新したときのリストへの反映は、EventAggregaterというキューを使って実現しています。双方向のSyncのヒントが得られるのではないでしょうか。

Using aurelia with Sass

AureliaコミッタのMatthew さんから教えて頂きました。

デフォルトではSassは使えるようにはなっていませんが、簡単に追加できるよーとのこと。詳細はBlogを読んでいただければわかりますが、簡単に紹介すると

package.jsonにgulp-sassを追加してnpmでインストール
gulpのビルドファイルをSassをコンパイルするように修正

です。