2014-02-21 55 views
1

背景故事
我使用AngularJS/KendoUI并使用角剑术的UI作为两者之间的该“桥”重挫。我使用Kendo作为它的treeview组件,这件作品是客户的要求。KendoUI ObservableArray儿童被KendoUI树形视图

我需要完成是
1.从由服务
2.周期性地检查在该数据中的每个元件提供的数据绘制树菜单,并更新一个“禁用”丙
3.重绘中的元素树视图基于上述步骤的结果。

假设
1.如果我希望能够更新剑道树视图,然后我需要使用剑道的observeables
2.我可能不正确地使用此剑道的ObservableArray。

问题
如果我创建像这样

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

things被记录到console新ObservableArray和结构是完整的。 但是,一旦树形视图被这个数据实例化,进一步将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的滥用,如果是这样,什么是正确的做法?

回答

2

在内部,TreeView小部件将您的ObservableArray变成kendo.data.HierarchicalDataSourcehttp://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"}