Introduction to Knockout JS, Part 1: Basics to Binding

Knockout JS is an MVVM tool for client-side JavaScript.  Knockout performs binding of a view model class to the view, which the view consists of an ordinary HTML document with a data-bind attribute.  The data-bind attribute contains binding information that Knockout uses to supply data from the view model to the view.

Let’s learn the basics of Knockout JS hand’s on.  To start,  below is a sample view model that we’ll attach to the view.  the viewModel class defines an observable property, which an observable is essentially a two-way binding between view and view model.  When the view changes, the view model is updated, and vice versa.

<script type=”text/javascript”>
var viewModel = {
currentValue: ko.observable(1)
};

ko.applyBindings(viewModel);
</script>

Notice the last line, ko.applyBindings; this applies the view model to the view; a second argument exists, allowing us to specify the ID of a region of the application to apply the model to, rather than applying it to the whole document.

To load up the currentValue property in the UI, we can assign it to a textbox like the following:

<input type=”text” data-bind=”value:currentValue” />

Knockout uses a binding structure of <binding>:<property or expression>.  In this case, since it’s an input, we use the value binding, and load in the currentValue property.  A span would use the text binding, as shown below, and a div would use the html binding.  The different between binding is essentially the attribute the binding is applied to, but is not always the case.

<span data-bind=”text:currentValue” />

<div data-bind=”html:currentValue” />

Attributes can also be bound; assuming we wanted to set a random value attribute on a link, we can create a new attribute using the attr binding, as shown below.  The attr binding uses as JavaScript class like notation to define the attributes.

<a target=”_blank” data-bind=”attr: { someattrib: currentValue }”>Sample Link</a>

Attribute expressions can also be chained using a syntax like the following:

data-bind=”{ html: htmlItem, attr: { href: attrItem } }”

What does this mean to us?  At runtime, Knockout applies the value from the model to each of the elements within the document.  As UI elements report a change (such as a blur event from a textbox), a call to the view model is made to update it and any other element referring to this property.  This only works if you use the ko.observable() function.

Bindings can become more complicated by forming expressions, which are longer statements evaluating the actual properties and checking a value within a range, list of acceptable values, etc.  For example, here is a more complex form of binding:

<span data-bind=”{ visible: currentValue() > 10, css: { Yellow: currentValue() < 30, Red: currentValue() >= 100, Orange: currentValue() >= 30 && currentValue() < 100 } }”>

This definition establishes the visible and css bindings, which within the css binding is several complex expressions.  We’ll get into CSS expressions later; for now, know that these expressions can be evaluated within a data-binding statement to. Notice one change in syntax; when using an expression, we use currentValue(); this is because ko.observable is actually a function (because of problems with the notion of properties related to IE).  If we had a reference to the view model, we could programmably set the currentValue using viewModel.currentValue(20), or get the value using viewModel.currentValue().  When supplying the property directly in the data-bind statement, we do not need parenthesis, using data-bind=”text:currentValue”.  When used in an expression, though, we do need the parenthesis as it’s the equivalent of manually invoking members of the view model programmatically.

That’s all the fun we have for KO bindings for now.  We’ll take a look at some of the other bindings in a future blog post.

Advertisements

One thought on “Introduction to Knockout JS, Part 1: Basics to Binding

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s