[Dart] web_ui : observableとかbindとか

Dartのweb_ui、まさに最新のwebアプリの作り方という感じだ。
bindやobservableで、なんだか知らないけど変数を変更しただけで
表示が更新されてくれて、超便利！

だが、実際ちょっとやってみると、「なんだか知らないけど」レベルではマズイ。

というわけでTopicをまとめてみた。

{{ }}とは

html側に埋め込む。{{ }}で囲まれている式の返り値のtoString()が、そこに表示される文字列となる。
但し、ここで使われている変数に「@observable」を付けないと、変数を変更しても即座に反映されない。

@observableとは

dart側に使う。変数に対して付ける。
これを付けられた変数は、以降、「変更」されると再描画が走るようになる。

変数を「変更」するとは
「変更」とはインスタンスの変更である。同じインスタンスでは、その中身をいくら変更しても変更とはならない。

@observable
List  a = [];

とした時、

a = ["hoge"];

とすれば再描画される。
が、

a.add("hoge");

とやっても再描画されない。（実はこの時に再描画を行う方法がある）

ところで、ここで言っている「再描画」とは、htmlに埋め込まれたinstantiateや{{ }}が再評価され、最新の状態が画面に反映されることである。

toObservable()とは

上記で、a.add("hoge")では再描画されないとしたが、往々にして、こういう時再描画してほしい。
でも、再描画させたいからといってListを作りなおすのはバカらしい。
ということで用意されたのがtoObservable()。
下記のように、toObservableでインスタンスをラップする事で、強制的に再描画を起こさせる。

a.add("hoge");  // ここでは再描画しない
a = toObservable(a);  // ここで再描画する

ちなみに、toObservableはMap,Set,Iterable専用らしい。

instantiateとは

html側に使用する。templateタグの属性として使用し、中身はcodeとなる。（dartではない？）
もっぱら、条件によってタグを表示させたり隠したりしたいときに使うのではないかと思う。（確かに便利だ。elseがあったらもっと良かったのだが）

例えば、下記のようにした場合、

<template instantiate="if type=='page1'">
  <div>Page1だよ</div>
</template>
<template instantiate="if type=='page2'">
  <div>Page2だよ</div>
</template>

変数typeを'page1'にすれば「Page1だよ」が、'page2'にすれば「Page2だよ」に、表示が切り替わってくれる。
なお、変数typeに@observableを付けるのを忘れないように。

ちなみに、隠す仕組みは、cssのdisplay:noneっぽい？

bind-valueとは

変数→htmlではなく、html→変数の場合、bindと言っているっぽい。
具体的にはinputタグで入力された内容を変数に反映させるとき。
inputのtypeでbind-valueなのか、bind-checkなのかが異なるので要注意。


リンク

• Observables and Data Binding with Web UI