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

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

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

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.

Initializing

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.

ko.applyBindings(ViewModel);

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(){
        ViewModel.companyName("Magical!");
        ViewModel.phoneNumber("000-999-8888");
}

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.