ダダ漏れ日記

下記の変数を設定した時のサンプル @observable String  data テキスト入力・・・type="text" <input type="text" bind-value="data"> チェックボックス・・・type="checkbox" <input type="checkbox" bind-checked="isChecked"> ※isCheckedはboolの変数。もちろん@observableが必要。 select <select bind-value="data">   <option value="one" selected="{{ data=='one' }}">その１</option>   <option value="two" selected="{{ data=='two' }}">その２</option> </select> なにかと面倒なselect。bind-valueでOKだが、各選択肢のselectedを工夫する必要あり。ちなみにこれは同時にひとつしか選択できない場合のみ有効。

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タ