Easy Web Forms With Knockout JS

3 Comments

I am always interested to learn about new technologies and frameworks, especially ones that make my UI work easier. The other day while researching new javascript frameworks, I stumbled across Knockout JS. There has been a large buzz around this relatively new framework. It introduces a whole new way of syncing javascript objects to DOM elements. It binds Javascript objects to the DOM. When the data model is updated, the linked DOM elements are automatically updated as well. If that sounds confusing, let me show you how Knockout JS is different. Let’s use a common web form.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form>
    <div>
        <label for="name">Name:</label>
        <input type="text" name="name" id="form-name" />
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="text" name="email" id="form-email" />
    </div>
    <div>
        <label for="address">Address:</label>
        <input type="text" name="address" id="form-address"/>
    </div>
    <div>
        <label for="telephone">Telephone:</label>
        <input type="text" name="telephone" id="form-telephone" />
    </div>
</form>

Here is my data model representing my form in javascript.

1
2
3
4
5
6
var contact =  {
    name : '',
    email : '',
    address : '',
    telephone : ''
};


Without Knockout JS I would have to write a function like this to populate my form using JQuery.

1
2
3
4
5
6
var set_form = function() {
    $('#form-name').val(contact.name);
    $('#form-email').val(contact.email);
    $('#form-address').val(contact.address);
    $('#form-telephone').val(contact.telephone);
}

And I would write another function to get the values from the form.

1
2
3
4
5
6
var get_form = function() {
    contact.name = $('#form-name').val();
    conact.email = $('#form-name').val();
    contact.address = $('#form-address').val();
    contact.telephone = $('#form-telephone').val();
}

If I wanted to keep them is sync, I would need to bind to the change event for each input as well.

1
2
3
$('#form-name').bind('change',function(e) {
    contact.name = $(this).val();
});

As you can see this can get very tedious, especially if I am working with many forms. Luckily, Knockout JS has an easier approach. Here is the form with Knockout JS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form>
    <div>
        <label for="name">Name:</label>
        <input type="text" data-bind="value:name”/>
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="text" data-bind="value:email"/>
    </div>
    <div>
        <label for="address">Address:</label>
        <input type="text" data-bind="value:address" />
    </div>
    <div>
        <label for="telephone">Telephone:</label>
        <input type="text" data-bind="value:telephone"  />
    </div>
</form>

I removed the unnecessary attributes and added an attribute called “data-bind.” Knockout JS uses “data-bind” to link the form to my data model. Here is what the javascript looks like.

1
2
3
4
5
6
7
var contact = {
    name : new ko.observable(''),
    email : new ko.observable(''),
    address : new ko.observable(''),
    telephone : new ko.observable('')
};
ko.applyBindings(contact);

Let me explain the code above. I changed the strings to ko.observable strings, which basically tells Knockout I want to observe this variable and update it accordingly. The ko.applyBindings instructs Knockout to link my observable variables to the DOM elements. It’s that simple. Now any time that I change the form, the contact object will automatically be updated and vice versa.

Forms aren’t the only thing Knockout can do. I will post some more advanced uses in the future. Knockout JS is developed by Steve Sanderson. If you would like to know more, visit KnockoutJS.com.

About Taylor

I am on the UI team at AppNexus. I majored in Economics at Yale, but became a software engineer in my spare time.

This entry was posted in Front-end feature, Javascript, User Experience. Bookmark the permalink.

3 Comments
  • SANKAR N

    nice example. thanks

  • Sam

    Hi
    Nice Example. Since i am new to the UI and also to the KO.Can you please explain how to bind the text from a JSON file to the labels of the form.I am looking alot of article but i am not getting the proper answer.

  • Niranjan Velakanti

    This helped me alot. Thank you