A Knockout.js binding to SortableJS.
JavaScript HTML
Permalink
Failed to load latest commit information.
.editorconfig v0.1.0: initital Jun 22, 2016
.gitignore v0.1.0: initital Jun 22, 2016
README.md
example.html
knockout-sortable.js v0.1.0: initital Jun 22, 2016
package.json v0.1.0: initital Jun 22, 2016

README.md

THIS PROJECT NEEDS A MAINTAINER.


knockout-sortablejs

A Knockout.js binding to SortableJS.

Demo: http://rubaxa.github.io/Sortable/

Support KnockoutJS

Include knockout-sortable.js

<div data-bind="sortable: {foreach: yourObservableArray, options: {/* sortable options here */}}">
    <!-- optional item template here -->
</div>

<div data-bind="draggable: {foreach: yourObservableArray, options: {/* sortable options here */}}">
    <!-- optional item template here -->
</div>

Using this bindingHandler sorts the observableArray when the user sorts the HTMLElements.

The sortable/draggable bindingHandlers supports the same syntax as Knockouts built in template binding except for the data option, meaning that you could supply the name of a template or specify a separate templateEngine. The difference between the sortable and draggable handlers is that the draggable has the sortable group option set to {pull:'clone',put: false} and the sort option set to false by default (overridable).

Other attributes are:

  • options: an object that contains settings for the underlaying sortable, ie group,handle, events etc.
  • collection: if your foreach array is a computed then you would supply the underlaying observableArray that you would like to sort here.
  • manuallyHandleUpdateEvents: a boolean to turn off the change events on update that other polymer elements listen to.

NPM

npm install knockout-sortablejs