<pre class="shiki github-dark shaku"><code>/** * @param {{value: string}} state * @param {HTMLInputElement} element */function model(state, element) { // 1. initialized the element value with state value element.value = state.value // 2. Two conditions: // (1) Update the state value, then it will also update element value with new state value // (2) Update input element value, then it will also update state value with element value Object.defineProperty(state, 'value', { get() { return element.value }, set(new_value) { element.value = new_value; return } }) element.addEventListener('change', (event) =&gt; { // this will update state value then `state's` setter method will update input value state.value = event.target.value; })}</code></pre>

Two conditions for state and view

Let's do some simple two-way binding. Please create a function model(state, element), to bind state.value to the HTMLInputElement element. const input…