Skip to content
Isotope binding for Knockout
JavaScript CSS HTML
Find file
Latest commit 4bfecf4 Nov 13, 2015 @aknuds1 Update README.md
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
README.md Update README.md Nov 13, 2015
demo1.html
demo2.html Update Knockout Mar 7, 2013
knockout-isotope.nuspec Update Knockout Mar 7, 2013

README.md

Knockout-Isotope

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.

Description

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.

Requirements

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.

Installation

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

Usage

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

<html>
  <head>
    <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());
      });
    </script>
  </head>
  <body>
    <div id="container" data-bind="isotope: items">
      <div data-bind="text: $data"></div>
    </div>
  </body>
</html>

Options

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());
  });
</script>
...
<div id="container" data-bind="isotope: {data: items, itemClass: 'item', filterClass: 'show', isotopeOptions: getOptions}">
  <div data-bind="text: $data"></div>
</div>
...

Testing

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

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

Something went wrong with that request. Please try again.