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>
Brilliant. knockoutjs + isotope. next -> knockoutjs + canvas. Opens up whole new worlds.
What about using a custom binding like this:
http://jsfiddle.net/BRP4d/2/
Yeah – I should have mentioned that, a custom binding is probably the best way to go.
Great post.
@thelinuxlich Your example didn’t work straight away – I needed to use ko.utils.unwrapObservable before using the isotope method. I’ve updated the code for others.
http://jsfiddle.net/BRP4d/27/
Cheers Vaughan. It’s been half a year so I’m sure Knockout’s changed a bit. Thanks for updating it!
Pingback: July 2011 Quick Hits
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
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?
I created an example of knockoutjs and Isotope working together. Its not the prettiest solution but it works.
http://jsfiddle.net/evanlarsen/C5y6G/
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/