Description

Create a tree view using Knockout. Tree is draggable/draggable and nodes can be deleted. Try it out here: kotree.herokuapp.com

Libraries Required

• jquery

• jquery-ui

• knockout

• knockout.mapping

JSON Format

[{id: 1, name: item1, projects: [{id: 2, name: item2, projects: []}]}, {id: 3, name: item3, projects: []}]

In Rails, you can check out my example on editing the json format in the projects model.

def as_json(options = {})
{
  id: id,
  name: name,
  projects: self.projects.collect {|n| n.as_json}
}
end

Knockout binding

ko.bindingHandlers.droppable = {
  init: function(element, valueAccessor, allBindingsAccessor, data, context) {
    $(element).droppable({
      drop: function(event, ui) {
        var dropped = $(this).data('id');
        var dragged = $(ui.draggable).data('id');

        $(ui.draggable).remove();
        $.ajax({
          url: 'projects/' + dragged + '.json',
          type: 'PUT',
          data: {'project': {'project_id': dropped}}
        }).done(function() {
          self.loadProjects();
        });
      }
    });

    $(element).draggable({
      revert: true
    });
  }
};

View

<ul class="nav nav-list" data-bind="template: {name: 'projects_template', foreach: projects}">
</ul>
<script type='text/html' id='projects_template'>
  <li data-bind="attr: {'data-id': $data.id, class: 'project-nav-li'}, droppable: $root">
    <span href='#' data-bind='html: "<a href=\"#\">" + name() + "</a>"'></span><span class='pull-right project-delete' data-bind='click: $root.deleteProject'><i class='icon-trash'></i></span>
  </li>
  <ul class="nav nav-list" data-bind="template: {name: 'projects_template', foreach: projects}">
  </ul>
</script>