Better UI components with KnockoutJS

January 17, 2016

I used to be a vanilla JavaScript guy, mainly because I took an excellent JavaScript course at Mississippi State. I put off learning jQuery until I couldn’t ignore it any more. And I’m glad I finally did learn it. It became my standard way of adding interactivity and various enhancements to my websites. But when a friend of mine asked me to help him write a smartphone app, I knew I needed something more powerful. New to the world of JavaScript libraries, I chose the one that looked like the easiest to learn—KnockoutJS.

Beyond jQuery

For a lot of people, JavaScript is jQuery. And it’s no wonder, what with its ability to easily target multiple elements and change them to your heart’s content. Even today, that covers enough ground for most projects I work on.

That said, there are times when your UI relies heavily on a changing data set—a filterable product list, for instance. In those cases you could use jQuery (or even vanilla JavaScript). But you would likely be better served by a JavaScript library that offers some form of data binding.

Conceptually, data binding refers to your data set being connected to your interface on a deep level. To continue our example of the filterable product list, imagine that you select a product category from a dropdown and the product list automatically knows how to adjust to your selection. Libraries that feature data binding can help you achieve this effect with less code than you might write with jQuery or vanilla JavaScript.

Knockout vs Angular vs React

I’m sure there are myriad articles out there that go in depth on the pros and cons of the various popular JavaScript libraries. I’m not going to do that here, partly because I don’t know enough about them all. But I have used Angular to make a single-page application. In my experience, Angular needs to control everything. I’m sure that’s not necessarily the case, but I found it easier to drop in Knockout where I needed it. To me, it seemed like Angular had more coding overhead. And you’re constantly trying to figure out the “Angular way” of doing things.

I don’t have experience with React, but from talks and tutorials I’ve seen, it’s verbose and convoluted. Obviously, people use it,^[1] but if you aren’t a full-blown programmer it’s going to suck for a while as you climb the steep learning curve. And I am not convinced it’s that much better than Knockout.

Knockout and WordPress

Since Knockout is fairly easy to drop in as needed, it makes a good pairing with WordPress. While you could certainly write a completely JavaScript-based WordPress theme, you’ll miss out on all the work that the WordPress templating system does for you. Knockout excels at giving you powerful data binding right where you need it.

Back to our example of a filterable product list. Using either wp_localize_script or a WordPress-flavored AJAX call, you could supply Knockout with the product data it needs and let it loop through and fill out the page for you. That way, you get the data binding magic for speedy front-end filtering, while using standard WordPress template code everywhere else.

A simple demo

Ugh. Don’t you hate when people drone on and on without giving you any code samples. :-) If you have made it this far, I think you deserve a demo.

A simple filterable list

See the Pen Simple list filter with KnockoutJS by Blake Watson (@blakewatson) on CodePen.

In this demo, we’re supplying Knockout with an array of data—a list of people and the categories they belong to.

First, we’re writing a PeopleViewModel object. Then, on line 41, we’re instantiating it and passing it to Knockout for processing.

PeopleViewModel has three properties. The first, people, is just a standard array of objects that we’re passing in.

selectedCategory is a Knockout observable, which means that Knockout watches it for changes and updates our UI accordingly. We’re using this property to tell us which radio button is checked at any given point. In the HTML, we’ve declared that we want the radio buttons bound to this observable. So when a radio button is checked, Knockout automatically updates selectedCategory.

filteredPeople is a computed observable. It uses our selectedCategory observable, but adds some logic. In this case, it checks the selected category and then returns an array of people objects based on that value. In other words, it does the filtering for us. Why didn’t we just use a regular function? Well, since we used an observable, Knockout watches it for changes. Here comes the magic: Knockout knows that if selectedCategory changes, then filteredPeople also changes. This is called dependency tracking, and when we use observables, Knockout handles all of that tracking for us.

If you flip back over to the HTML, you’ll see that we’re using a foreach binding to loop through the array we get from filteredPeople. Inside our loop, each list item has access to the name and category of the current people object. We’re setting the text of the list item to be the value of name.

Hopefully, you can see where this is going. Since our HTML elements are bound to our observables, and since Knockout watches observables for changes, we get a UI that reacts (heh) to the changes in our data, as well as data that reacts to changes in our UI—like when you select a different radio button. This is called two-way data binding and it’s what puts the punch in Knockout.

For complex UI components, try Knockout

Like any library, there’s a learning curve to Knockout. But I argue that its learning curve is easier than that of Angular and React. It’s easy to plop it into a WordPress theme when you need some front-end magic, without it taking over everything. If you enjoyed this article and want more, the Knockout website has some nice interactive tutorials and easy-to-follow documentation. If you would like to see more Knockout tutorials on this site, then get in touch and let me know.