Knockout.js Beginner Tutorial

What is it

I’m going to dumb things down to the point where I could have understood them on the first readthrough. So if you’re looking for advanced tips and tricks on Knockout, this is not the place. Sometimes all these new fancy javascript libraries can be a little intimidating. I found knockout so completely useful that I wanted to make sure that others could understand what it does at its most basic.

Knockout.js basically allows you to bind elements from the DOM to model data specified in Javascript. To get even more simplistic, it lets you tie javascript variables to a specified portion of the html page. So, say I have a javascript variable called phonenumber that has been binded to a value inside of a div tag. When I update the value for the variable phonenumber, the value inside of the div tag will be updated.

The great thing about it is, you don’t have to tie your javascript into specific page elements. For example, previously if I had done a redesign on a site where there was some heavy javascript manipulation of element values, I would have had to recode large portions of the javascript. With Knockout, all that is required is to move the variable name and no javascript changes are required. Its basically its own javascript template engine.

Getting Started

Knockout is a MVVM framework. Model-View-View Model. Below, we will go over exactly what that is and create your first working knockout program. I will provide small bits of the code, then the full chunk along with a zip file of the demo. If you’d prefer to skip to the end just to download it go right ahead.

The View Model

A view model represents the data model that you will be displaying or manipulating. This is not the view code itself, but the data that will be displayed through the View. See below for an example.

var ViewModel = {
    companyName: ko.observable("TechJunkie"),
    phoneNumber: ko.observable("911-911-9111")

As you can see, this data object is called a bit different than your standard javascript object. The values being assigned are wrapped in the ko.observable function call. While you can declare an object without wrapping it in the observable function, that’s where the true power of knockout lies. Let’s continue on and then we’ll revisit this later

The View

<th>Company Name</th>
<th>Phone Number</th>

<td><span data-bind="html: companyName" /></td>
<td><span data-bind="html: phoneNumber" /></td>

The data-bind attribute is specified to give the knockout library a value to hook onto. What the “html: companyName” tells knockout is to hook on to the HTML element of the current span, and tie the HTML to the value of companyName specified in the View Model.


Now we’ve got our View Model and View setup, how are these tied together? By calling the applyBindings function and passing it our ViewModel object.


Now so far, if you took the javascript code and our HTML view code, and ran them, you would see a table with the values “TechJunkie” and “911-911-9111”. Pretty boring from a functionality standpoint. It displays an object value in an HTML element, big deal, jQuery or plain javascript can do that easily enough. But that’s not where the real value lies. Let’s update the value of the values initialized in our javascript object.

In Action

First, let’s include a button to click to initialize updating the values.

<input type="Button" value="Update Values" onclick="updateValues()">

And then the javascript function to update those values.

function updateValues(){

The page is loaded with one set of values specified by our javascript object. If we update those object values however, the HTML is automatically updated accordingly. You won’t have to worry about updating values in every function call ever again if you initialize your values with the knockout library. Good luck, post questions below, and if I misspoke on anything feel free to correct me.

Posted by Will on June 8, 2012

3 thoughts on “Knockout.js Beginner Tutorial”


June 10, 2012 at 7:44 pm

Your post on the Knockout library was certainly interesting as person new to the world of JS frameworks. I do however have a few questions.

You mention that the View model is initialized as such after the ApplyBindings function or method is called


var ViewModel = {
companyName: ko.observable(“TechJunkie”),
phoneNumber: ko.observable(“911-911-9111”)

Which then displays the values “TechJunkie” and “911-911-9111” in the appropriate HTML elements bound to the KnockOut library. I get this but does this mean that for example if this were a data driven site, these values would be populated from a database of some sort?

The example of where data is updated via the function call

function updateValues(){

How does this work if the HTML element is updated? Does it then update the KnockOut variable?



June 11, 2012 at 1:56 pm

No, updating the HTML element does not have the reverse effect. However, considering the fact that if you are updating the HTML, you’re likely using javascript to do so, I would just update the value of the javascript object. That accomplishes the same thing and is really what the library is all about, not having to update both in your code. This way you just update the variable value and it updates the HTML value.



June 11, 2012 at 10:59 pm

Thanks for the reply. Possibly a question a n00b would ask but if in the instance I were using Javascript to update the database with a value from the HTML element, I take it that knockout.js would need to retrieve this value in some manner. Does that mean you would need to use multiple JS frameworks i.e. one to update, the second to display the value e.g. knockout.js, etc.

Second question – What if the form does not utilize JS to update the database?


Leave a Reply

Your email address will not be published. Required fields are marked *