Using Isotope with Knockout.js


Knockout.js is a JavaScript library for writing MVVM style HTML applications. Isotope is a super cool jQuery plugin for fluid list animation – go play around with it here, it’s really impressive.

A question from a colleague prompted me to look at the Knockout.js documentation for the first time in a while and I noticed that there’s now a ‘afterAdd’ option available for the foreach binding. This allows us to hook in some code for manipulating an element once it’s been added to the list, intended for animation. I wondered if it was possible to insert Isotope into this process and it turns out it’s really easy – take a look at it working together here.

The code to do it was also really simple and demonstrates quite how handy Knockout is. I’m sure there’s some debate to have about whether the function for manipulating the element in the view really belongs on the ViewModel, but I’ll leave that for another day.

var $wordList = $('#word-list'),
    wordsViewModel = {
        words: ko.observableArray([]),
        newWord: ko.observable(''),
        add: function() {
            this.words.push( this.newWord() );
            this.newWord('');
        },
        wordAdded: function(el) {
            $wordList.isotope( 'appended', $(el) );
        }
    };

ko.applyBindings(wordsViewModel);

$wordList.isotope({
    layoutMode: 'fitRows',
    itemSelector: '.word'
});
<form data-bind="submit: add">
    <input placeholder="New Word" data-bind="value: newWord" autofocus />
</form>
<ul id="word-list" data-bind="template: { name: 'word-item-tmpl', foreach: words, afterAdd: wordAdded }">
</ul>
<script id="word-item-tmpl" type="text/x-jquery-tmpl">
    <li class="word">${ $data }</li>
</script>
About these ads

14 thoughts on “Using Isotope with Knockout.js

  1. Pingback: July 2011 Quick Hits

  2. I’m having trouble getting KnockoutJs and RequireJs to work… Do you think you could provide an example of using KnockoutJs and RequireJs together?

    I’m having trouble because I dont understand how Knockout and jQuery can be loaded into AMD modules because dont they attach themselves to the DOM?

    Sorry if this is off topic.. i just couldnt find any helpful resources and you seem to be the best person to ask on this subject.

    Thanks

  3. nice example, but i think the remove function is not working wit knockout. I tried to integrate isotope with knockout, but I can’t implement the remove function because knocokut re-renders all isotope-item on any change in the viewmodel collection. Any suggestion?

  4. Hi, just an update. Thanks for the article! I Could not get the jquery.tmpl to work on the original fiddle, so here’s a working version with knockout’s built-in templating engine (other suggested fixes above incorporated, including custom binding)

    http://jsfiddle.net/cB6Kc/21/

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