一つのファイル、二つの形 — 数を知らない一覧

ここまでの画面は、値が変わっても形はそのままだった。実際の画面はそうではない — 待ちがいないときと三人のときでは違うものを見せなければならない。

分かれる場所

{ "type": "conditional", "condition": "{{empty}}",
  "then":   { "type": "text", "text": "Nobody is waiting", ... },
  "orElse": { "type": "box", ... } }

condition が真なら then、偽なら orElse。どちらも普通のノードなので、何でも入る。

ここで {{empty}} を使ったのが要点だ。{{waiting == 0}} のような式は書いていない。条件を 決める側 は画面ではなくサーバーだ — 「空である」の定義が変われば(たとえば予約待ちは数えないことにすれば)、直すのはサーバーだけになる。

数を知らない行

{ "type": "list", "items": "{{rows}}",
  "itemTemplate": { "type": "linear", "direction": "horizontal", "distribution": "space-between",
    "children": [
      { "type": "text", "text": "{{item.no}}", ... },
      { "type": "text", "text": "{{item.since}}", ... } ] } }

items は配列を指し、itemTemplate は 一行 の形だ。行が何本かはどこにも書いていない。

テンプレートの中では {{item.*}} でその行の値を使う。外の状態と名前が混ざらない。

{{rows}} に三つ入れれば三本、十入れれば十本できる。ファイルは1,234バイトのままだ。