KnockoutJS Hello World

Knockout (aka KnockoutJS) is a javascript library which makes it relatively easy to implement the MVVM pattern in your web UIs.  My intent here is to merely demonstrate how quickly you can put together a working demo of Knockout’s capabilities.

There are a ton of online resources which go into greater depth on Knockout.  For example  knockoutjs.com and knockmeout.net.

On to the demo…

Step 1: Get Knockout.js

You can download knockout.js from the knockoutjs.com download page.  You also have the option to use a content delivery network(CDN), but let’s assume you want the ability to test your page offline.

Save the file to your machine.

Step 2: Create HelloKnockout.html

Using any text editor, create a file named HelloKnockout.html.  Save the file to the same location as your knockout.js file.

Step 3: Add an input box

Insert the following code to create a page consisting solely of an input box.

<html>
<body>
<input />
</body>
</html>

So far it’s not anything special.  Load this file in a browser and you’ll see an input box which accepts text.

Step 4: import knockout.js

Add a head section with a script tag which imports your downloaded knockout.js file.


<html>
<head>
<script src="knockout-3.3.0.js"></script>
</head>
<body>
<input />
</body>
</html>

I’m using version 3.3 of the knockout library.  Make sure the name matches the file you downloaded.

Step 5: Add a view model

Add a script tag below your input tag, and create a variable which will represent your model.

<html>
<head>
<script src="knockout-3.3.0.js"></script>
</head>
<body>
<input />
<script>
var viewModel = {
name: ko.observable("John")
}
</script>
</body>
</html>

This essentially tells knockout to keep track of viewModel.name and initialize it to “John”.

Step 6: Add binding instructions for your view

Add a data-bind attribute to your input tag.

<html>
<head>
<script src="knockout-3.3.0.js"></script>
</head>
<body>
<input data-bind="value: name" />
<script>
var viewModel = {
name: ko.observable("John")
}
</script>
</body>
</html>

This says that you want to keep the input tag’s value in sync with the model’s name member.

Step 7: bind the input box to the model

Call the knockout applyBindings method.

<html>
<head>
<script src="knockout-3.3.0.js"></script>
</head>
<body>
<input data-bind="value: name" />
<script>
var viewModel = {
name: ko.observable("John")
}
ko.applyBindings(viewModel);
</script>
</body>
</html>

This will apply the viewModel bindings across the entire page.  When you load the page you’ll see John in the input box.  As you change input box value, you’ll also update the viewModel.name member.  How can we be sure?

Step 8: Bind a second tag to the view model

Add a span below the input tag and bind its text to viewModel.name.

<html>
<head>
<script src="knockout-3.3.0.js"></script>
</head>
<body>
<input data-bind="value: name" />
<br >
<span data-bind="text: name"></span>
<script>
var viewModel = {
name: ko.observable("John")
}
ko.applyBindings(viewModel);
</script>
</body>
</html>

Now, whenever the input tag value is synced with the viewModel.name, that same value is synced with the span’s text.

Step 9: Get faster updates

By default, the viewModel is updated when the input tag loses focus.  One option is to perform the update on key down events.  This will sync content with each keystroke.  Add the following valueUpdate data-bind setting.

<html>
<head>
<script src="knockout-3.3.0.js"></script>
</head>
<body>
<input data-bind="value: name, valueUpdate:'afterkeydown'" />
<br >
<span data-bind="text: name"></span>
<script>
var viewModel = {
name: ko.observable("John")
}
ko.applyBindings(viewModel);
</script>
</body>
</html>

Now, the model and span are refreshed as you type.

There you have it.  I hope this puts you on the road to becoming a knockout rock star.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>