问剔除嵌套的可排序sourceParent.splice不是一个函数
EN

Stack Overflow用户

提问于 2016-01-20 07:43:09

回答 2查看 816关注 0票数 0

在这里，我正在编写使用Knockout可排序的代码。它应该深入地显示嵌套的可排序3+级别。

数据被传递给模板，但是一些元素在被删除后返回到它们原来的位置(例如，A，B元素在最上层的上)。

我应该如何配置嵌套的排序表，以便在没有错误的情况下也可以使用最高级别？

错误：

is :244未登录的TypeError: sourceParent.splice不是一个函数或 is :252unaught TypeError: targetParent.splice不是一个函数

JSFiddle -类似的工作示例

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>

knockout.js

knockout-2.0

knockout-3.0

knockout-sortable

knockout-templating

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-01-20 09: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>

票数 -1

Stack Overflow用户

发布于 2018-03-09 17: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>