Aurelia 学ぶ ４

Aurelia（アウレリア）の勉強をしています。
http://aurelia.io/

チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1

前回のつづき

アドレス帳の表示部分

contact-list.js
 
import {WebAPI} from './web-api';

export class ContactList {
  static inject() { return [WebAPI] };

  constructor(api){
    this.api = api;
    this.contacts = [];
  }

  created(){
    this.api.getContactList().then(contacts => this.contacts = contacts);
  }

  select(contact){
    this.selectedId = contact.id;
    return true;
  }
}

名前付けの規則なのか。
ファイル名が、contact-listであれば、クラス名は、ContactListになっている。

static inject() { return [WebAPI] };
は、よく分からない。
コンストラクタのthis.api=apiにより、WebAPIクラスのメソッドが、this.apiを使って利用できるようになっているようにみえる。

created()は、Aureliaが使うメソッド。
ビューが作られる時に、呼ばれるらしい。
呼ばれると、WebAPIのgetContactListメソッドを使って、アドレス帳データ（contact list）を取得する。


contact-list.html

<template>
  <div class="contact-list">
    <ul class="list-group">
      <li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
        <a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
          <h4 class="list-group-item-heading">${contact.firstName} ${contact.lastName}</h4>
          <p class="list-group-item-text">${contact.email}</p>
        </a>
      </li>
    </ul>
  </div>
</template>

repeat.for="contact of contacts"は、ContactListのcontacts配列を繰り返して表示する。

${contact.id === $parent.selectedId ? 'active' : ''}
${}内は、JavaScriptが使える。
$parentは、ビューモデル、つまり、ContactListを意味する。
したがって、ここは、繰り返し表示される中で、選択された人である場合、クラスに、activeを追加する。

<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
route-hrefは、Aureliaが使う属性。
route:contactsは、htmlで言えば、href="contacts.php"のようなものか。
params.bind: {id:contact.id}は、その引数。
この形式ならば、複数の引数を渡すこともできそう。
html風に書くと、href="contacts.php?id={contact.id}"
実際には、href="contacts/:id"となるのかな。複数の引数を渡すときは、どう記述するのだろうか。
疑問は残るが、これで、Appクラスのroute関係と繋がる。
click.delegate="$parent.select(contact)"は、<a>タグがクリックされた時の処理。
クリックされると、ContactList.select(contact)が実行され、ContactList.selectedIdが設定される。
<a>タグにより、contactsの画面が表示される。

.delegateは、.triggerでも良いが、.delegateが使える場合は、.delegateを使う。


app.html

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="./styles.css"></require>
  <require from="./contact-list"></require>

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <i class="fa fa-user"></i>
        <span>Contacts</span>
      </a>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <contact-list class="col-md-4"></contact-list>
      <router-view class="col-md-8"></router-view>
    </div>
  </div>
</template>


<require from="./contact-list"></require>で、contact-listを追加する。
<contact-list>の部分に表示される。

これで、画面の左側に、アドレスの一覧が表示される。


前回、Appクラスに
    config.map([
      { route: '',              moduleId: 'no-selection',   title: 'Select'},
とあり、no-selectionが、<router-view>に表示される理由（繋がり）が分かりにくかったのですが、今回は、contact-list同士のため、理解しやすいです。
moduleIdに指定されたモジュール（ここでは、no-selection）は、<router-view>に表示されると考えれば良さそうです。
少し、分かってきました。