Knockout vs Angular vs React
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
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
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
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
category of the current people object. We’re setting the text of the list item to be the value of
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.
People including developers at Facebook, who created it. ↩