Question

背景故事
我正在使用AngularJS / KendoUI并使用angular-kendo-ui作为两者之间的“桥梁”。我使用Kendo作为它的树视图组件，这件作品是客户要求。

我需要完成的是什么 1.从服务提供的数据中绘制树状菜单 2.定期检查此数据中的每个元素，并更新“禁用”支柱 3.根据上述步骤的结果重绘树视图中的元素。

假设
1.如果我想能够更新剑道树视图，那么我需要使用剑道的观察力 2.我可能在这里错误地使用了Kendo的ObservableArray。

问题
如果我像这样创建一个新的ObservableArray

  var things = new kendo.data.ObservableArray([{
      text: "Parent 1",
      items: [{text: "Child 1"}, {text: "Child 2"}, {text: "Child 3"}]
  }])

things被记录到console，结构完好无损。但是，一旦使用此数据实例化树视图，进一步将things记录到控制台会显示子项（项）不再存在。如果孩子不存在，很难迭代和更新孩子！

Plunker here http://plnkr.co/edit/qJpIvK?p=info，如果您查看'script.js'文件并打开控制台，您应该能够看到我的问题。

这是代码

HTML

    <div ng-app="MyApp">
        <div ng-controller="TreeController">
            <div kendo-tree-view k-options="thingsOptions"></div>
        </div>
    </div>

JS

  var app = angular.module("MyApp", ["kendo.directives"]);

  app.controller('TreeController', function($scope, $timeout) {

    var things = new kendo.data.ObservableArray([{
      text: "Parent 1",
      items: [{
        text: "Child 1"
      }, {
        text: "Child 2"
      }, {
        text: "Child 3"
      }]
    }, {
      text: "Parent 2",
      items: [{
        text: "Child 1"
      }, {
        text: "Child 2"
      }, {
        text: "Child 3"
      }]
    }]);

    // should have 3 items
    console.log('preTreeView init', things[1].items);
    $scope.thingsOptions = {
      dataSource: things
    };

    $timeout(function() {
      // the 3 items expected are gone, why?
      console.log('postTreeView init', things[1].items);
    }, 1000);

  });

这是对ObservableArray的误用，如果是，那么正确的方法是什么？

Answer 1

在内部，TreeView小部件将您的ObservableArray变为kendo.data.HierarchicalDataSource http://docs.telerik.com/kendo-ui/api/framework/hierarchicaldatasource，将每个子项移动到自己的DataSource个对象中。

您可以像这样导航它们：

var treeViewWidget = $(".k-treeview").data("kendoTreeView");
var dataSource = treeViewWidget.dataSource; // this is a HierachicalDataSource

var parents = dataSource.data(); // Parent1 and Parent2
var parent1 = parents[0];
var doesParent1HaveChildren = parent1.hasChildren; // true

var childrenDataSource = parent1.children; // this is a HierarchicalDataSource
var child1 = childrenDataSource.data()[0]; // this is {text: "Child 1"}

KendoUI ObservableArray孩子被KendoUI treeView破坏了

1 个答案: