Steven Sanderson's blog

Knockout-ES5 is a plugin for Knockout.js that lets you use simpler and more natural syntax in your model code and bindings. For example, you can replace this:

var latestOrder = this.orders()[this.orders().length - 1]; // Read a value
latestOrder.isShipped(true);                               // Write a value

… with this:

var latestOrder = this.orders[this.orders.length - 1];     // Read a value
latestOrder.isShipped = true;                              // Write a value

… while still retaining all of Knockout’s capabilities of automatically refreshing your UI and automatically detecting dependencies between different model properties.

Basically, it’s all the goodness of Knockout, but without having to remember parentheses. It requires a moderately up-to-date browser (more about this later).

Getting started

Download knockout-es5.min.js and add a <script> reference after you reference Knockout itself, e.g.:

<script src='knockout-2.2.1.js'></script>
<script src='knockout-es5.min.js'></script>

Then you can declare model classes without needing any explicit references to ko.observable, e.g.:

function OrderLine(data) {
    this.item = data.item;
    this.price = data.price;
    this.quantity = data.quantity;
 
    this.getSubtotal = function() {
        return "$" + (this.price * this.quantity).toFixed(2);
    }
 
    // Instead of declaring ko.observable properties, we just have one call to ko.track 
    ko.track(this);
}

Notice that the properties are just plain properties, without being wrapped in ko.observable. This means that during computations, such as in getSubtotal, there’s no need to invoke them as functions to read their value (e.g., this.quantity()). Similarly if you wanted to change a value, you’d just use a plain old assignment, e.g.:

someOrderLine.quantity += 1;

… instead of function calls (e.g., someOrderLine.quantity(someOrderLine.quantity() + 1);).

How it works

It’s so very simple. ko.track walks the list of properties on your model object, and for each one, replaces it with an ES5 getter/setter pair that reads/writes a hidden underlying observable (initialised to the existing property value).

The neat thing is that the Knockout.js core library doesn’t need to know anything about this: when you get/set one of these properties, some observable is read or written, and therefore all of KO’s existing binding, computed, and dependency detection functionality just works perfectly. Knockout-ES5 doesn’t have to patch any of the KO internals, so it works with any recent version of KO.

Controlling which properties are upgraded

If you want to restrict which properties are upgraded to observability, pass an array of property names:

ko.track(someModelObject, ['firstName', 'lastName', 'email']);

By design, ko.track does not recurse into child objects. I would encourage you to declare child objects as instances of some class of your own, with its constructor having its own ko.track call — this gives you far more control over how much of the object graph is walked.

Accessing the observables

If you want to access the underlying ko.observable for a given property, e.g., so that you can subscribe to receive notifications when it changes, use ko.getObservable:

ko.getObservable(someModel, 'email').subscribe(function(newValue) {
    console.log('The new email address is ' + newValue);
});

About arrays

Array-valued properties are special. As well as upgrading them to support observability like other properties, Knockout-ES5 intercepts calls to push, pop, splice, etc., to trigger change notifications just as you’d expect. This means that any UI based on the array, such as a list, will update automatically if you add or remove items.

With Knockout-ES5, you can access the array’s subproperties directly, e.g.:

var numItems = myArray.length; // Don't have to write myArray().length

Also, Knockout-ES5 adds a few additional functions that have proven useful on ko.observableArray instances: remove, removeAll, destroy, destroyAll, replace.

Computed properties

The most important feature of Knockout.js, and what differentiates it from most other Model-View JavaScript libraries, is its “reactive” dependency-detection capabilities: its ability to chain computed properties, so that changes propagate through an arbitrary object graph into your UI, without needing you to declare those dependencies anywhere.

Traditionally, Knockout uses ko.computed for this. So how does it work in Knockout-ES5? There are a couple of different patterns you can choose from:

1. Just put a plain function on your model. In the example at the top of this blog post, getSubtotal is a plain old function. By invoking it from a binding, KO will detect the function’s dependencies (in this case, price and quantity) and will automatically refresh the UI when either changes:

   <span data-bind="text: getSubtotal()"></span>

   Pretty straightforward.

2. Use ko.defineProperty. This is provided by Knockout-ES5 and is a KO-style equivalent to Object.defineProperty. It lets you declare a computed property with a get (and optionally set) function, for example:

   ko.defineProperty(this, 'subtotal', function() {
       return this.price * this.quantity;
   });
    
   // Alternatively, the third arg can be an object like { get: function() { ... }, set: ... }

   The advantage of this is that (A) you can read the subtotal property without having to invoke it as a function (as in getSubtotal()), and (B) its value will be cached and reused for all future invocations until a dependency changes, instead of re-running your get logic for each evaluation:

   <span data-bind="text: subtotal"></span>

   To ensure dependencies can be detected, place ko.defineProperty calls after your ko.track call. Or, if you want to put ko.defineProperty first, make sure no other code tries to evaluate the computed property before ko.track runs (if it evaluates before dependencies are tracked, it won’t be able to detect those dependencies).

Browser support

Knockout-ES5 works in ECMAScript 5-capable browsers. Let’s consider whether that’s appropriate for your project.

Since the Age of Antiquity, browsers such as IE6 have supported the ECMAScript 3 (ES3) JavaScript specification. It’s a tired old workhorse of a spec. Since then, all modern browsers have moved to ECMAScript 5 (ES5). You’ve been running ES5 for some years already, at least since IE9/Firefox 4/Chrome 6. ES5 adds a wealth of language and runtime primitives that open up valuable new possibilities. It’s no surprise that, when deciding which older IE versions to leave behind, jQuery 2.0 chose to support only IE 9 and newer, where ES5 is available.

Of course, Knockout.js itself takes backward compatibility very seriously: it has 100% support for anything from IE6 and Firefox 2 onwards. You can drop it into pretty much any web app with confidence. That is not changing. But today there are many projects where you know for sure your code will run only in an ES5 environment, for example:

• Large, sophisticated public web apps (such as the one I currently work on) that already require at least IE9 or another modern browser
• Intranet applications for sane corporate environments
• PhoneGap apps targetting iOS/Android/WP8
• Server-side code running inside Node.js

Summary: Knockout.js itself continues to support ES3 browsers such as IE6, and Knockout-ES5 is an optional plugin for those projects where it’s safe to depend on ES5.

The source

If you’re have Knockout experience already and are interested in more details about the implementation of Knockout-ES5, see the source. It’s shorter than this blog post.

It’s been five months since the last significant Knockout release, so it’s about time for another! The core team and many contributors have been hard at work adding some sweet new features, performance upgrades, architectural improvements, and bug fixes. After all this, the final code file is smaller than the previous version

You can download Knockout 2.2.0 now from GitHub where we also have the source, and see the updated documentation and test suite.

What’s improved?

The theme for KO 2.2.0 was “all the small things”. We processed and closed many, many, many work items tracked on GitHub, fixed a bunch of niggly little issues, improved our code structure, and put in some enhancements we’ve been wanting for a while.

My favourite enhancement is that the foreach binding will now detect when you have reordered elements in an array, and will simply move the corresponding DOM elements into the new order (previously, a “move” was handled as an “add” and a “delete”). You don’t have to change your code to enable this – it just works, even if you’re moving, adding, and deleting multiple items as a single atomic operation. Example:

If you want to animate the movements of DOM nodes into their new positions, you can make use of the new beforeMove and afterMove callbacks.

We’ve also made some features work more like you might always have thought they should work. For example, the css binding can now attach programmatically-generated CSS class names to elements (previously, it was limited to toggling predefined CSS class names). Example:

Other improvements include: 

• The with, if, and ifnot bindings have been enhanced to preserve their original DOM elements on initial binding, so they are lighter and won’t unnecessarily strip out any special behaviours inserted by third-party libraries. I know a lot of people asked for this.
• The dependency detection mechanism is now smarter in many places to avoid registering subscriptions that would be unnecessary no-ops
• Support for IE10 (well, we basically already supported it, but there was one edge-case issue with autocompletion that we fixed)
• Improved AMD support (the ko variable is now available in the context of all custom binding handlers, even if it isn’t in global scope)
• The text binding can now be used in a virtual element (e.g., <!--ko text: myValue--><!--/ko-->)
• Observable and computed properties have a new peek function for advanced control over dependency detection
• Bugfixes

Big thanks to Michael Best and Ryan Niemeyer – my fellow KO core team members – and the many community members who contributed features, specs, and clearly-reproducible bug reports

Last night we released version 2.1.0 of knockout.js. This brings a whole bundle of added functionality and performance improvements. For a more detailed rundown of what’s new, see Ryan Niemeyer’s blog post.

With this release we welcome new core team member Michael Best, who implemented a lot of the 2.1.0 goodness. One of my favourite new features is the $index context variable. Here’s a short usage example:

The cool thing is that $index is an observable and is updated automatically as you add or remove items in any collection bound to a foreach (and so your UI will update to match). Impressively, Michael was able to add this new functionality while simultaneously improving the performance of foreach whether or not you are using $index!

We also benefited from pull requests, issue reports, and feature suggestions from many others in the community. Special thanks to neonstalwart and mtscout6 for not only implementing AMD module loader support and putting up with a lot of questions from me, but even including full documentation pages in their pull request – flawless OSS etiquette!

Again, if you want to know more about what’s new in KO 2.1.0, head on over to Ryan’s post for a full rundown.