7. Form fields - MagnusThor/BobTheBinder GitHub Wiki

##"value" binding

When binding the model to form-fields such as <input> you use the "value" binder.

 <input type="text" id="name" data-bind="value:name" />

This applies when the elements that can be tied directly to an object property.

##"checkchange" binding

The checkchange adds an event handler that captures the "check" of a checkbox input field.

 <input type="checkbox" data-bind="checkchange:isApproved,checked:isApproved" />

The example above binds the checkbox to the models isApproved property ( bool ) , the second binder checked specifies which property on the model that determines whether the form field (checkbox) is checked or not.

If you need to give the user the possibility to check 1-n "options" you take advantage of the data-repeat binder as shown below.

  <div data-repeat="skills">
  <div>
   <label>
    <input type="checkbox" data-bind="checkchange:$root.person.skills" />
    <span data-bind="text:name"></span>
   </label>
   </div>
   </div>

In this case we have a property on the model (model.person.skills) that stores the selected options (skills ), 1-n many input (checkbox) is rendered by iterating over the collection of (skills) by using the data-repeat binder ; data-repeat="skills".

##"selectchange" binding (select)

Working with <select> is very similar to working with checkboxes ( see above ). In the 'selectchange' binder's value you specify what property on the model to modify when the DOM element associated is changed.

<select id="list" data-bind="selectchange:$root.selectedOption" 
 data-with="options">
 <option data-repeat="options" 
        data-bind="text:value,value:value,
         select:$root.selectedOption">
 </option>
</select>

The by using associating the DOM element (option) using the data-repeat you render each option in the collection (array) that is the source for option's. In this case the model has a property (array) named "options". As you see there is a binder named select specified on the option element, this binder determines if the option is selected or not. ( Note that selectchange and select points to the same 'object' on the model )

Our model in this case consist of a property (object ).

###deal with 1-n selected options (multiple)

if you specify that the <select> allows 1-n many options to be selected, using the "multiple attribute as shown below.

<select multiple>

You need to ensure that the model property defined in the selectchange binder is an array.