Inputs and Selects

In the default case, the data-f-bind attribute creates a bi-directional binding between the DOM element and the model variable. This binding is bi-directional, meaning that as the model changes, the interface is automatically updated; and when end users change values in the interface, the model is automatically updated.

Flow.js provides special handling for DOM elements input and select.

In particular, if you add the data-f-bind attribute to a select or input element, the option matching the value of the model variable is automatically selected.

Example

    <!-- option selected if sample_int is 8, 10, or 12 -->
    <select data-f-bind="sample_int">
        <option value="8"> 8 </option>
        <option value="10"> 10 </option>
        <option value="12"> 12 </option>
    </select>