Bindings In KnockoutJS - Part III

In this article, we will discuss the bindings used with form elements.

Part 11 explained the control statement bindings to control the rendering of HTML markup in KnockoutJS applications. In this article, we will discuss the bindings used on the form elements.

There are 11 binding handlers available to control the element's behavior in the form as in the following:

  1. uniqueName binding
  2. value binding
  3. submit binding
  4. enable binding
  5. disable binding
  6. hasFocus binding
  7. checked binding
  8. click binding
  9. event binding
  10. options binding
  11. selectedOptions binding

Let us have an overview of the first 5 bindings in this Part IIIa.

Note: The complete example with source for the first 5 bindings is given at the end of this article.

The UniqueName Binding

The uniqueName binding adds a unique name to the associated element. The uniqueName binding handler accepts the true/false value or expression. This binding is rarely used.

For example, if you are using jQuery validation, then we need to explicitly provide the name for the element. We then need to use the uniqueName binding.

<p>Name: <input type="text" data-bind="value: text, uniqueName: true" /> Type something to enable submit button</p>

In this example above, we have added the uniqueName binding to the input element. If you see the rendered markup of the input element then you could see the name attribute with the unique name. 

The Value Binding

The "value" binding assigns the value of the associated element to the JavaScript property supplied to the binding handler. When the element's value is changed, the JavaScript property will be updated as well if the property is observable.

<p>Name: <input type="text" data-bind="value: text, uniqueName: true" /> Type something to enable submit button</p>
// View model property
this.text =
ko.observable(''); 

In the markup above, the "valueUpdate" binding is used with the "value" binding. The values for the "valueUpdate" binding handler can be keypress, keyup & afterKeydown string values. As the parameter supplied, the property bound with the 'value' binding will be updated.

The Submit Binding

The submit binding adds an event to the element [might be form element] and executes the JavaScript function assigned to the binding handler when the form is submitted. 

When you submit the form, the KO will execute the associated JavaScript function and will not allow the default action to submit the form values to the server. So we need to make a call to the server from the associated JavaScript function to add/update/delete the form values.

<form data-bind="submit: submitMe">
   <p>Name: <input type="text" data-bind="value: text, valueUpdate: 'keyup'" />Type something to enable submit button</p>
   
<button type="submit"> Submit</button>
</form>
// View model property & function
this.text= ko.observable('');
this.submitMe= function () { alert('Form submitter'); };

If you press the Enter key on the text box or press the submit button then you could see the form submitted. Note that we can use click binding on submit button but click binding won't work if you press the Enter key on the text box.

Before submitting the form, we need to handle the form validation. For form validation I suggest you use the knockout-validation plug-in.

The Enable/Disable Binding

The enable binding enables the associated element if the value supplied to the binding handler is the true value or an expression. The disable binding is the same, such as for enable binding. 

From the submit example:

p>Name: <input type="text" data-bind="value: text, valueUpdate: 'keyup'"></input>Type something to enable submit button</p>
<button type="submit" data-bind="enable: isEnabled">Submit</button>
//
View model property & function
this.isEnabled
= ko.computed(function () {
return this.text().length > 0 && this.isDisabled() === false;
},
this);

On the initial stage, when the page loads, the submit button will be disabled as per the computed property. Once you start typing in the text box, the submit button will be enabled with the enable binding handler.

Here is the example for all the first 5 bindings with source.