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:
- uniqueName binding
- value binding
- submit binding
- enable binding
- disable binding
- hasFocus binding
- checked binding
- click binding
- event binding
- options binding
- 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.