Kendo UI 可观察数组子项被 Kendo UI treeView 破坏答案

【问题标题】：KendoUI ObservableArray children being clobbered by KendoUI treeViewKendo UI 可观察数组子项被 Kendo UI treeView 破坏
【发布时间】：2014-02-21 18:57:40
【问题描述】：

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

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

假设
1.如果我想能够更新剑道树视图，那么我需要使用剑道的observables
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 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>

  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 的滥用吗？如果是，正确的做法是什么？

【问题讨论】：

标签： javascript kendo-ui kendo-treeview

【解决方案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"}

【讨论】：