capsid.js で input のミラリング

capsid.js を使って、インプットフォームのミラリング (入力内容を即座に別dom に反映) をする例です

<div class="mirroring">
  <p>
    <input class="src" placeholder="Type something here" />
  </p>
  <p class="dest"></p>
</div>

const { def, on, wired } = capsid

class Mirroring {
  @wired('.dest') get dest () {}
  @wired('.src') get src () {}

  @on('input') onReceiveData (e) {
    this.dest.textContent = this.src.value
  }
}

def('mirroring', Mirroring)

マネージャーコンポーネント (MirroringManager) の dest に .mirror-dest 要素がワイヤーされます。 src に .mirror-src 要素がワイヤーされます。

input 要素に入力があると、 input イベントがマネージャーコンポーネントにバブリングして @on('input') onReceiveData メソッドが呼ばれます。

onReceiveData では、 dest.textContent に対して、src.value を代入することでミラリングを実現しています。

デモ

コードペン