KnockoutJS custom binding for Quicksand

This plugin has been moved into GitHub. And thanks to some updates to Quicksand, it now works with the latest versions of jQuery, Quicksand, and KnockoutJS.

Lately I’ve been experimenting with KnockoutJS, a JavaScript framework for streamlining client-side data and UI updates. I’ve found it wonderfully easy to implement Knockout’s out-of-box functionality and obsolete tons of my custom code. This conversion was helped by Knockout’s thorough documentation and numerous working examples. But I soon had the desire to integrate Knockout with Quicksand, a jQuery plugin for animating list sorts and filters. This quickly proved difficult, probably because I’m still new to Knockout, but with help from the Knockout forums I eventually created a custom binding to apply Quicksand animations to a Knockout observableArray. No one else has published such a binding so I’m sharing mine for others’ benefit. But beware that it may not handle every circumstance you throw at it.

Overview

The quicksand custom binding mirrors Knockout’s foreach (docs), which displays and tracks changes to an observableArray (docs). Simply put, the quicksand binding aims for the same functionality but with fancier animations.
The foreach binding can also be added to a template (docs) binding for greater flexibility. So I’ve created a quicksandTemplate to mirror that functionality as well. The quicksandTemplate binding depends on functions in the quicksand binding.

Code

Here is the JavaScript code for the custom bindings, written against KnockoutJS 2.2.1.

The logic above is actually pretty simple.

  1. Create a hidden container that mirrors the content of the data-bound element.
  2. Wire the hidden container, rather than the data-bound one, to be updated by Knockout.
  3. Whenever the hidden container changes, synchronize its contents with the data-bound element using Quicksand.

Usage

The Quicksand custom bindings aim to support the same syntax as their built-in counterparts.

The optional options attribute can specify Quicksand parameters.

And to see the bindings in action, check out this jsFiddle based on Knockout’s “animated transitions” example.

One thought on “KnockoutJS custom binding for Quicksand

Leave a Reply

Your email address will not be published.