KnockoutJS:使嵌套可排序对象在添加子对象时自动扩展 [英] KnockoutJS: Make nested sortable automatically expand when adding a child
本文介绍了KnockoutJS:使嵌套可排序对象在添加子对象时自动扩展的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在所附的示例中，我有一个嵌套的可排序的能够显示树结构的可排序对象.
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.
该模板可能有问题，或者一个简单的jQuery + CSS技巧可以解决该问题，但我找不到正确的模板.
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>
推荐答案
我不知道为什么，但是在AddChild的第一次调用中，您失去了对父元素的引用.您可以替换knockout代码:
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();
到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>
这篇关于KnockoutJS:使嵌套可排序对象在添加子对象时自动扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
