javascriptjqueryknockout.jsnested-sortableknockout-templating

KnockoutJS: Make nested sortable automatically expand when adding a child


In the attached example I have a nested sortable that is capable of displaying tree structures.

The goal is to make the structure expand when new child is added to make the change visible.

A function automatically expands the structure when a new item is being added, but it only expands after adding 2nd child, it should expand immediately after adding 1st child.

Something is probably wrong with the template, or a simple jQuery+CSS trick could solve the problem, but I can't find the right one.

function Node(data) {
  var self = this;
  typeof data != 'undefined' ? self.id = data.id : self.id = '1';
  self.parent = ko.observable();
  self.children = ko.observableArray();
  self.addNode = function() {
    var child = new Node({
      'id': self.id + '.' + (self.children().length + 1)
    });
    child.parent(self);
    self.children.push(child);
    return child;
  }
};
var tree = new Node();
var child1 = tree.addNode();
var child2 = tree.addNode();
var viewModel = function() {
  this.tree = ko.observable(tree);
  this.addChild = function(node, event) {
    var self = this;
    node.addNode()
    var $parent = $(event.target).parent().parent();
    if ($parent.prop('tagName') == 'LI') {
      if (!$parent
        .hasClass('mjs-nestedSortable-expanded')) {
        $parent
          .addClass('mjs-nestedSortable-expanded');
      }
      if ($parent
        .hasClass('mjs-nestedSortable-collapsed')) {
        $parent
          .removeClass('mjs-nestedSortable-collapsed');
      }

    }
  }
};
ko.applyBindings(new viewModel());

$('.sortable')
  .nestedSortable({
    startCollapsed: true
  });
ol.sortable,
ol.sortable ol {
  margin: 0 0 0 25px;
  padding: 0;
  list-style-type: none;
}
ol.sortable {
  margin: 4em 0;
}
.sortable li {
  margin: 5px 0 0 0;
  padding: 0;
}
.sortable li div {
  border: 1px solid #d4d4d4;
  cursor: move;
}
.sortable .disclose {
  cursor: pointer;
  width: 10px;
  display: none;
}
.sortable li.mjs-nestedSortable-collapsed>ol {
  display: none;
}
.sortable li.mjs-nestedSortable-branch>div>.disclose {
  display: inline-block;
}
.sortable li.mjs-nestedSortable-collapsed>div>.disclose>span:before {
  content: '+ ';
}
.sortable li.mjs-nestedSortable-expanded>div>.disclose>span:before {
  content: '- ';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdn.rawgit.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdn.rawgit.com/mjsarfatti/nestedSortable/master/jquery.mjs.nestedSortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div class="dd" data-bind="template: {name:'nodeTemplate', data: tree}"></div>
<script id='nodeTemplate' type='text/html'>
  <div>
    <span class="disclose"><span></span></span>
    <span data-bind="text: id"></span>
    <a href="" data-bind="click: $root.addChild">Add child</a>
  </div>
  <ol class="sortable ui-sortable" data-bind="foreach: { data: children, as: 'child' }">
    <!-- ko if: child.children().length > 0 -->
    <li class="mjs-nestedSortable-collapsed mjs-nestedSortable-branch" data-bind="template: {name:'nodeTemplate', data: child}, attr: { 'data-id': child.id }">
    </li>
    <!-- /ko -->
    <!-- ko if: child.children().length == 0 -->
    <li class="mjs-nestedSortable-leaf" data-bind="template: {name:'nodeTemplate', data: child}, attr: { 'data-id': child.id}">
    </li>
    <!-- /ko -->
  </ol>
</script>


Solution

  • I don't know why but in the first call of AddChild you lose reference to the the parent element. You can replace knockout code:

    var $parent = $(event.target).parent().parent();
    

    to jQuery workaround:

    var $parent = $('.dd').find('*').filter(function() {
        return $(this).text() === node.id;
    }).parent().parent();
    

    modified snippet:

    function Node(data) {
      var self = this;
      typeof data != 'undefined' ? self.id = data.id : self.id = '1';
      self.parent = ko.observable();
      self.children = ko.observableArray();
      self.addNode = function() {
        var child = new Node({
          'id': self.id + '.' + (self.children().length + 1)
        });
        child.parent(self);
        self.children.push(child);
        return child;
      }
    };
    var tree = new Node();
    var child1 = tree.addNode();
    var child2 = tree.addNode();
    var viewModel = function() {
      this.tree = ko.observable(tree);
      this.addChild = function(node, event) {
        var self = this;
        node.addNode()
        
        var $parent = $('.dd').find('*').filter(function() {
    		return $(this).text() === node.id;
        }).parent().parent();
    
        if ($parent.prop('tagName') == 'LI') {
          if (!$parent
            .hasClass('mjs-nestedSortable-expanded')) {
            $parent
              .addClass('mjs-nestedSortable-expanded');
          }
          if ($parent
            .hasClass('mjs-nestedSortable-collapsed')) {
            $parent
              .removeClass('mjs-nestedSortable-collapsed');
          }
    
        }
      }
    };
    ko.applyBindings(new viewModel());
    
    $('.sortable')
      .nestedSortable({
        startCollapsed: true
      });
    ol.sortable,
    ol.sortable ol {
      margin: 0 0 0 25px;
      padding: 0;
      list-style-type: none;
    }
    ol.sortable {
      margin: 4em 0;
    }
    .sortable li {
      margin: 5px 0 0 0;
      padding: 0;
    }
    .sortable li div {
      border: 1px solid #d4d4d4;
      cursor: move;
    }
    .sortable .disclose {
      cursor: pointer;
      width: 10px;
      display: none;
    }
    .sortable li.mjs-nestedSortable-collapsed>ol {
      display: none;
    }
    .sortable li.mjs-nestedSortable-branch>div>.disclose {
      display: inline-block;
    }
    .sortable li.mjs-nestedSortable-collapsed>div>.disclose>span:before {
      content: '+ ';
    }
    .sortable li.mjs-nestedSortable-expanded>div>.disclose>span:before {
      content: '- ';
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    <script src="https://cdn.rawgit.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
    <script src="https://cdn.rawgit.com/mjsarfatti/nestedSortable/master/jquery.mjs.nestedSortable.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
    
    <div class="dd" data-bind="template: {name:'nodeTemplate', data: tree}"></div>
    <script id='nodeTemplate' type='text/html'>
      <div>
        <span class="disclose"><span></span></span>
        <span data-bind="text: id"></span>
        <a href="" data-bind="click: $root.addChild">Add child</a>
      </div>
      <ol class="sortable ui-sortable" data-bind="foreach: { data: children, as: 'child' }">
        <!-- ko if: child.children().length > 0 -->
        <li class="mjs-nestedSortable-collapsed mjs-nestedSortable-branch" data-bind="template: {name:'nodeTemplate', data: child}, attr: { 'data-id': child.id }">
        </li>
        <!-- /ko -->
        <!-- ko if: child.children().length == 0 -->
        <li class="mjs-nestedSortable-leaf" data-bind="template: {name:'nodeTemplate', data: child}, attr: { 'data-id': child.id}">
        </li>
        <!-- /ko -->
      </ol>
    </script>