Please see my other JavaScript articles.

Using knockout.js to dynamically reflect changes to edit fields.

Continuing from my last Knockout.js: Input fields article where I illustrated basic binding, I will now show how to enable editable fields to be bound as well.

I’ll begin with the HTML from the last article where I have the first name field bound.

The first change I’ll make is to add two new input fields with “value” bindings.

Now I have two editable fields, one for each name.
However, when I change their values, the labels above then aren’t updated.

In order to have updates to my editable controls’ ViewModel notify my properties when something has changed, I must apply an observable to each properties in my ViewModel.

Now, when I modify either edit control’s value, its lable above it is automatically updated!