剔除嵌套的可排序sourceParent.splice不是一个函数
剔除嵌套的可排序sourceParent.splice不是一个函数
提问于 2016-01-20 15:43:09
在这里，我正在编写使用Knockout可排序的代码。它应该深入地显示嵌套的可排序3+级别。
数据被传递给模板，但是一些元素在被删除后返回到它们原来的位置(例如，A，B元素在最上层的上)。
我应该如何配置嵌套的排序表，以便在没有错误的情况下也可以使用最高级别？
错误：
is :244未登录的TypeError: sourceParent.splice不是一个函数 或 is :252unaught TypeError: targetParent.splice不是一个函数
var viewModel = function() {
var self = this;
self.children = ko.observable([{
"name": "A",
"children": [{
"name": "A1",
"children": [{
"name": "A11"
}, {
"name": "A12"
}]
}, {
"name": "A2"
}]
}, {
"name": "B",
"children": [{
"name": "B1"
}, {
"name": "B2"
}]
}]);
}
ko.applyBindings(new viewModel());ul {
border: solid 1px green;
list-style-type: none;
margin:0px;
}
li {
padding: 10px;
border: solid 1px blue;
margin:0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
<script id="nodeTmpl" type="text/html">
<li>
<!-- ko if: $data.name -->
<a href="#" data-bind="text: $data.name"></a>
<!-- /ko -->
<!-- ko if: $data.children -->
<ul data-bind="sortable: { template: 'nodeTmpl', data: $data.children }"></ul>
<!-- /ko -->
</li>
</script>
<ul data-bind="sortable: { template: 'nodeTmpl', data: $root.children }"></ul>
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-01-20 17:24:41
这个问题是通过更改<ul data-bind="template: { name: 'nodeTmpl', data: $root }"></ul>行来解决的，我从一些引用中删除了$data，因为它导致了错误。
var viewModel = function() {
var self = this;
self.children = [{
"name": "A",
"children": [{
"name": "A1",
"children": [{
"name": "A11",
}, {
"name": "A12",
}]
}, {
"name": "A2",
}]
}, {
"name": "B",
"children": [{
"name": "B1",
}, {
"name": "B2",
}]
}]
};
ko.applyBindings(new viewModel()); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
<script id="nodeTmpl" type="text/html">
<li>
<!-- ko if: $data.name -->
<a href="#" data-bind="text: name"></a>
<!-- /ko -->
<!-- ko if: $data.children -->
<ul data-bind="sortable: { template: 'nodeTmpl', data: children }"></ul>
<!-- /ko -->
</li>
</script>
<ul data-bind="template: { name: 'nodeTmpl', data: $root }"></ul>
Stack Overflow用户
发布于 2018-03-10 01:53:14
彼得·格哈特提供的解决方案不正确。问题在于使用的是数组的可观察，而不是observableArray。
错误声明sourceParent (它是拖出元素的视图模型上的集合)没有splice函数。这是正确的，一个可观测的没有splice函数，而一个array或observableArray有。同样的情况也适用于targetParent (它是将元素拖到的视图模型上的集合)。
要使初始示例正常工作，只需将observable更改为observableArray即可。
但是，正如您在原始示例和彼得·格哈特提供的解决方案中所注意到的，即使没有抛出错误，它仍然不能正常工作。您会注意到，在拖动元素时，要么根本不移动，要么消失。
这里的解决方案是将每个array转换为一个observableArray，以便由sortable-binding更新它们。
var viewModel = function() {
var self = this;
self.children = ko.observableArray([{
"name": "A",
"children": ko.observableArray([{
"name": "A1",
"children": ko.observableArray([{
"name": "A11"
}, {
"name": "A12"
}])
}, {
"name": "A2"
}])
}, {
"name": "B",
"children": ko.observableArray([{
"name": "B1"
}, {
"name": "B2"
}])
}]);
}
ko.applyBindings(new viewModel());ul {
border: solid 1px green;
list-style-type: none;
margin: 0px;
}
li {
padding: 10px;
border: solid 1px blue;
margin: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
<script id="nodeTmpl" type="text/html">
<li>
<!-- ko if: $data.name -->
<a href="#" data-bind="text: $data.name"></a>
<!-- /ko -->
<!-- ko if: $data.children -->
<ul data-bind="sortable: { template: 'nodeTmpl', data: $data.children }"></ul>
<!-- /ko -->
</li>
</script>
<ul data-bind="sortable: { template: 'nodeTmpl', data: $root.children }"></ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34904385
复制相关文章
相似问题
腾讯云开发者
