KnockoutJS: сделать вкладку сортируемой автоматически расширяемой при добавлении потомка

В прилагаемом примере у меня есть вложенная сортировка, которая способна отображать древовидные структуры.

Цель состоит в том, чтобы сделать структуру расширяемой при добавлении нового дочернего элемента, чтобы сделать изменение видимым.

Функция автоматически расширяет структуру при добавлении нового элемента, но она расширяется только после добавления второго дочернего элемента, она должна расширяться сразу после добавления первого дочернего элемента.

Возможно, что-то не так с шаблоном, или простой трюк jQuery+CSS может решить проблему, но я не могу найти правильный.

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>

Источник

1 ответ

Решение

Я не знаю почему, но в первом звонке AddChild вы теряете ссылку на родительский элемент. Вы можете заменить knockout код:

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

в jQuery обходной путь:

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

модифицированный фрагмент:

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>

Источник
Другие вопросы по тегам