Isotope binding for Knockout
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit 4bfecf4 Nov 13, 2015
Failed to load latest commit information.
lib Revise error message Nov 17, 2013
spec Update Knockout Mar 7, 2013
.gitignore Add NuGet spec Feb 17, 2013 Update Nov 13, 2015
demo1.html Update Knockout Mar 7, 2013
demo2.html Update Knockout Mar 7, 2013
knockout-isotope.nuspec Update Knockout Mar 7, 2013


Knockout-Isotope is currently unmaintained, as I haven't used Knockout for a long time.

Isotope binding for Knockout. Visit the project home page to find builds (including the required version of Knockout) of the code.


This binding makes it possible to visualize a Knockout observableArray through the excellent Isotope jQuery plugin. See demo.html for a demonstration of the binding's functionality.


Knockout-Isotope requires Isotope and a modified version of Knockout. Knockout had to be modified in order to notify bindings of new elements before they're added to the DOM.


Download lib/knockout-isotope.min.js (or knockout-isotope.js for development) and include it in your project after Knockout and Isotope.


In your HTML, refer to the 'isotope' Knockout binding for the element intended to serve as the container for your Isotope elements, for example:

    <script type="text/javascript" src="spec/lib/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="spec/lib/knockout-2.2.2.debug.js"></script>
    <script type="text/javascript" src="spec/lib/jquery.isotope.js"></script>
    <script type="text/javascript" src="lib/knockout-isotope.js"></script>

    <script type="text/javascript">
      $(document).ready(function () {
          function ViewModel() {
            this.items = ko.observableArray(["Item 1", "Item 2"]);

          ko.applyBindings(new ViewModel());
    <div id="container" data-bind="isotope: items">
      <div data-bind="text: $data"></div>


Knockout-Isotope also supports certain options, perhaps most importantly allowing you to specifying options to Isotope, e.g. to control the layout mode.

The options are:

  • itemClass

    Specify the class that Isotope elements should be adorned with (Knockout-Isotope does this automatically).

  • filterClass

    Specify the class that should be control whether Isotope elements are displayed or not (Knockout-Isotope applies this class automatically).

  • isotopeOptions

    This should be a callback on the view model that returns an object containing options for initializing Isotope. See Isotope's documentation for information on supported options. An options object can for instance look like this: { layoutMode: 'masonry' }

Example of Passing Options to Knockout-Isotope

<script type="text/javascript">
  $(document).ready(function () {
      function ViewModel() {
        this.items = ko.observableArray(["Item 1", "Item 2"]);
        this.getOptions = function () {
          return { layoutMode: 'masonry' };

      ko.applyBindings(new ViewModel());
<div id="container" data-bind="isotope: {data: items, itemClass: 'item', filterClass: 'show', isotopeOptions: getOptions}">
  <div data-bind="text: $data"></div>


Knockout-Isotope is tested through Jasmine specifications, contained in 'spec/isotopeBinding.js'. In order to run them, open 'spec/runner.html' in a browser.


Downloads for Knockout-Isotope (including required Knockout version) are available at Google Drive.