Knockout: Edit fields

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.

1-knockout-edit-fields 2-knockout-edit-fields

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!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s