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>