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!