Model Binding

Demo

Explanation

<div
  id="container"
  data-store="{bindText:'foo',bindNumber:42,bindBool:true,bindSelection:1}"
>
  <input type="text" data-model="bindText" />
  <input type="number" data-model="bindNumber" />
  <textarea data-model="bindText"></textarea>
  <label>
    <span>Checkbox</span>
    <input type="checkbox" data-model="bindBool" />
  </label>
  <select data-model="bindSelection">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <div class="flex flex-col">
    <label>
      <input type="radio" data-model="bindSelection" value="1" />
      <span>Option 1</span>
    </label>
    <label>
      <input type="radio" data-model="bindSelection" value="2" />
      <span>Option 2</span>
    </label>
    <label>
      <input type="radio" data-model="bindSelection" value="3" />
      <span>Option 3</span>
    </label>
    ...
  </div>
  <code>
    <pre data-text="JSON.stringify(ctx.store(),null,2)"></pre>
  </code>
</div>

Current the two-way data binding generated by data-model supports

• input
• textarea
• select
• checkbox
• radio

Note: For radio buttons if you don’t include a name for grouping the radio button will get the name of the signal as their name.

If there are more types that you need support for please reach out!