やること表

やること表です。追加、完了、削除、絞り込みができます。

構成

Todos   一覧、入力途中の文字列、絞り込み
Clock   自分のタイマーで動く時計
Page    Todos と Clock への参照を持つ親

時計は、時計が進んでも一覧が描き直されないことを確認するために入れてあります。

Page が持っているのは Todos と Clock への参照です。時計が進んで自分を描き直しても、Page の状態は変わりません。Page が描き直された場合も、子への参照は変わっていないので子は描き直されません。これはプログラマが指定する最適化ではなく、参照の同一性から決まります。

入力途中の文字列

入力途中の文字列は Todos が持ちます。一覧が描き直されても、入力欄の内容は保たれます。

一覧の行には key: を付けています。並べ替えや削除で行が移動しても、DOM のノードは作り直されません。

マークアップ

デザイナの HTML にある見本を複製しています。LPScript のプログラムに HTML はありません。