Дети KendoUI ObservableArray стираются KendoUI treeView

Предыстория
Я использую AngularJS/KendoUI и использую angular-kendo-ui в качестве «моста» между ними. Я использую Kendo для его компонента просмотра дерева, и эта часть является требованием клиента.

Что мне нужно сделать, так это
1. нарисовать древовидное меню из данных, предоставленных службой
2. периодически проверять каждый элемент в этих данных и обновлять «отключенный» реквизит
3. перерисовывать элементы в древовидное представление на основе результатов предыдущего шага.

Предположения
1. Если я хочу иметь возможность обновлять представление дерева кендо, мне нужно использовать наблюдаемые объекты кендо
2. Возможно, здесь я неправильно использую ObservableArray кендо.

Проблема
Если я создам новый ObservableArray вот так

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

things быть зарегистрированным в console и структура не повреждена. Однако, как только древовидная структура создается с этими данными, дальнейшая регистрация things в консоли показывает, что дочерние элементы (элементы) больше не присутствуют. Очень сложно перебирать и обновлять дочерние элементы, если они не существуют!

Загрузите сюда 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, и если да, то каков правильный подход?


javascript kendo-ui kendo-treeview
person technicolorenvy    schedule 21.02.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Внутри виджет 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"}
person CodingWithSpike    schedule 21.02.2014