Knockout: Edit fields

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.

3-knockout-edit-fields

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

4-knockout-edit-fields

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.

5-knockout-edit-fields

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

6-knockout-edit-fields

Leave a Reply

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

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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