宣言的なJSフレームワーク デモ解説(2)
概要
data-x.jsに付属するデモ都道府県一覧（demo/prefectures）の解説
フレームワーク
デモ概要
都道府県一覧を表示する。
表示するデータは、都道府県名、県庁所在地、人口、人口割合、表示している人口の合計。
地方を選択することで、表示する都道府県変更できる。
データは、都道府県名、県庁所在地、地方、人口を持ち、人口割合は計算で求める。
人口100万未満は人口を青く、人口500万以上は人口を赤くする。
ソース解説
index.html
都道府県一覧（models/Prefectures.js）を読み込み、引数で渡してフレームワークを実行。
models/Prefectures.js
都道府県一覧データ
main.html
繰り返す要素をtemplateタグで囲む
main.js
行インデックスを参照するので、コンテキストを利用する。
地方名の配列。都道府県一覧から、地方名を取得し、重複を排除する。
選択した地方を格納する。
表示する都道府県一覧。選択した地方（this.region）に一致するものを表示する。選択した地方（this.region）がない場合、すべての都道府県を表示する。
コンテキストからインデックス変数を取得して１加算したものを行番号とする。
人口割合（%）の計算。人口÷総人口。アスタリスクを含むドット記法を使い簡単に定義できる。
集計のタイトル。地方を選択した場合、地方名＋「合計」。
表示している都道府県の総人口。
プロパティ間の依存関係を記述。
選択した地方（region）が変更になったら、表示する都道府県一覧（prefectures）をhtml要素へ反映。
選択した地方（region）が変更になったら、集計タイトル（sumTitle）をhtml要素へ反映。
表示する都道府県一覧（prefectures）が変更になったら、集計（sumPopulation）をhtml要素へ反映。
main.bind.css
バインドルールの外部ファイル。
選択する地方の一覧の指定。optionのvalueとtextContentをバインド。
人口の表示。locale-stringでフォーマット。locale-stringはtoLocaleString()と同じ。
人口が1,000,000未満（lt:1000000）の場合、html要素のclassにunder-millionを追加。
人口が5,000,000以上（ge:5000000）の場合、html要素のclassにover-5millionを追加。
割合の表示。fix:2で小数点2桁まで表示。fix:2はtoFix(2)と同じ。
感想
- アクセサプロパティ（@プロパティ#get）を使うと宣言的に記述しやすい。
- 人口割合（@prefectures.*.share#get）のプロパティの書き方は、ちょっとかっこいい。
Discussion