逆引きAurelia

自分用にまとめていたAureliaフレームワークに関するTipsを紹介します。
Aureliaはv2が現在開発中ですが、この記事ではv1を対象とします。
https://github.com/aurelia/framework

Routing編

viewModelをリフレッシュする

1. まず、viewModelにdetermineActivationStrategy()を定義し、activation戦略を変更する

import {activationStrategy} from 'aurelia-router';
...
class MyViewModel {
  determineActivationStrategy() {
    return activationStrategy.replace; // ビューモデルを新しいインスタンスで置き換える
    // return activationStrategy.invokeLifecycle; // 既存のVMでルーターライフサイクルメソッドを呼び出す
    // return activationStrategy.noChange; // デフォルトの振る舞いを明示的に使用する
  }
}

1. 現在のページにnavigateする(この際、replaceオプションを渡す)

private goToRoute(route) {
        this.router.navigateToRoute(route, {}, { replace: true });
}

遷移後に特定の処理を行う

RouterConfigurationのaddPostRenderStep()は遷移後の処理を追加できる。

• スクロール位置をリセットする

  configureRouter(config: RouterConfiguration, router: Router) {
      config.addPostRenderStep({
          run(navigationInstruction: NavigationInstruction, next: Next): Promise<any> {
              // 初回遷移時のみスクロール位置をリセット
              if (navigationInstruction.router.isNavigatingNew) {
                  window.scroll(0, 0);
              }
              return next();
          }
      });
  }
  

テンプレート編

DOMへのアクセス

https://aurelia.io/docs/templating/html-behaviors#getting-the-dom-element-for-your-behavior

DIでElementのインスタンスを貰うだけ

import {autoinject} from 'aurelia-framework';
  
  @autoinject
  export class RedSquareCustomAttribute {
    constructor(private element: Element){
      this.element.style.width = this.element.style.height = '100px';
      this.element.backgroundColor = 'red';
    }
  }

要素の繰り返し

• 配列の場合

  repeat.for="v of array"

  <template>
      <p repeat.for="friend of friends">Hello, ${friend}!</p>
  </template>
  

• Mapの場合

  repeat.for="[k, v] of map"

  <template>
      <p repeat.for="[greeting, friend] of friends">${greeting}, ${friend.name}!</p>
  </template>
  

条件によって表示を切り替える

https://aurelia.io/docs/templating/basics#conditionals

• show.bind

  CSSクラスaurelia-hideを設定し、可視性を切り替える

  <template>
      <label for="greet">Would you like me to greet the world?</label>
      <input type="checkbox" id="greet" checked.bind="greet">
      <div show.bind="greet">
          Hello, World!
      </div>
  </template>
  

• if.bind

  DOMから要素を完全に削除する

  <template>
      <label for="greet">Would you like me to greet the world?</label>
      <input type="checkbox" id="greet" checked.bind="greet">
      <div if.bind="greet">
          Hello, World!
      </div>
  </template>
  

  if.bindではelseも使える

  <template>
      <div if.bind="showMessage">
          <span>${message}</span>
      </div>
      <div else>
          <span>Nothing to see here</span>
      </div>
  </template>
  

view-modelからテンプレートを動的に変更する

getViewStrategy()を実装しviewを返させる

export class MultiView {
  gender : string

  getViewStrategy() {
      if(this.gender == 'boy')
          return './multi-view-blue.html'
      else
          return './multi-view-pink.html'
  }

  // when view is made visible (e.g. by using the router)
  activate() { 
      this.gender = Math.random()>0.5 ? "boy" : "girl"
  }
}