javascript - Kendo UI Observable Array 子项被 Kendo UI treeView 破坏

Question

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

我需要完成的是
1.根据服务提供的数据绘制树形菜单
2.定期检查此数据中的每个元素，并更新一个'disabled' prop
3. 根据上述步骤的结果重绘 Treeview 中的元素。

假设
1.如果我想能够更新kendo tree view，那么我需要使用Kendo的observeables
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 并且结构完好无损。但是，一旦使用此数据实例化了 Treeview ，进一步将 things 记录到控制台显示子项(项目)不再存在。如果子项不存在，则很难迭代和更新它们!

Plunker 在这里 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它将每个 child 移动到他们自己的 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"}