examples/concatenator.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Patella Example - Concatenator</title>
    <script src="https://cdn.jsdelivr.net/npm/patella@2.2.2"></script>
  </head>
  <body>
    <main>
      <h1>Concatenator</h1>
      <input type="text" oninput="model.first = value" placeholder="Enter some"/>
      <input type="text" oninput="model.second = value" placeholder="text!"/>
      <h3 id="output"></h3>
    </main>
    <script>
      const $output = document.getElementById("output");
      const model = Patella.observe({
        first: "",
        second: "",
        full: ""
      });
      Patella.computed(() => {
        model.full = model.first + " " + model.second;
      });
      Patella.computed(() => {
        $output.innerText = model.full;
      });
    </script>
    <footer>
      <a href="https://github.com/luawtf/Patella/blob/master/examples/concatenator.html">View source</a>
    </footer>
  </body>
</html>