本当にデータバインド、ディレクティブ、オブザーバブル、ストリーム.ウェブUIの構築のために?

3710 ワード

私は、ちょうど図書館diffHTMLを発見しました
そして、私はサンプルの1つを適応させました.
以下のコードを見て、ないデータのない、ディレクティブ、UIは常に可能な限り最高のレートで、ゲームのループのようにリフレッシュされます
これは実行可能な解決策だろうか.
あなたの考えを教えてください.
ここでテストできます.
(function () {

  const {innerHTML, html} = window.diff

  const state = {
    name: "Anonymous",
    email: "[email protected]"
  }

  const actions = {
    changeName: (e) => state.name = e.target.value,
    changeEmail: (e) => state.email = e.target.value
  }

  function render() { 
    innerHTML(window.scene, html`
      <style>
        input {
          margin-bottom: 10px;
          display: block;
        }
      </style>
      <h2> 
        Hello ${state.name} <br /> Your email is : ${state.email}
      </h2>
      Name : <input oninput="${actions.changeName}"/>
      Email : <input oninput="${actions.changeEmail}"/>
    `);
    requestAnimationFrame(render);
  }

  render();

})();