Patella Example - Concatenator

by luafox

HTML

<script src="https://cdn.jsdelivr.net/npm/patella@2.0.0-PRERELEASE"></script>
<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>

JavaScript

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;
});