Kendo Treeの制御データソースMVVMが子ノードを表示しない

ビューモデルを更新して複数の剣道ツリーコントロールのデータソースを動的に更新しようとしました。親ノードはレンダリングされますが、子ノードは表示されません。Kendo Treeの制御データソースMVVMが子ノードを表示しない

HTML：

<div id="trees-vm"> 
    <h1>Trees</h1> 
    <ul data-template="tree" data-bind="source: treesData"></ul> 
</div> 

<script id="tree" type="text/x-kendo-template"> 
    <li> 
    <h2 data-bind="text: treeName"></h2> 
    <div data-role="treeview" data-bind="source: treeData"></div> 
    </li> 
</script>

JS：

var viewModel = kendo.observable({ 
     treesData:[], 
     setSource:function(){ 
      var trees = []; 
      for (i = 1; i < 11; i++) { 
      var tree = {}; 
      tree.treeName = 'Tree ' + i; 
      tree.treeData = [{ text: "Furniture", items: [ 
           { text: "Tables & Chairs" }, 
           { text: "Sofas" }, 
           { text: "Occasional Furniture" } 
          ]}, 
           { text: "Decor", items: [ 
           { text: "Bed Linen" }, 
           { text: "Curtains & Blinds" }, 
           { text: "Carpets" }] 
          }]; 
      trees.push(tree); 
      } 
      this.set('treesData', trees); 
     } 
    }); 
    kendo.bind($("#trees-vm"), viewModel); 
    viewModel.setSource();

例：https://jsfiddle.net/63hc9qdd/

これが動作しない理由を誰かが知っていますか？

ULのテンプレートがバインドされているオブジェクト剣道UIのTreeViewのDataSourceをそれぞれにネストされている問題があるようです：

出典

2016-06-18 bbg

私は、問題は、あなたが空の配列として 'treesData'を定義しているということだと思います。 – whipdancer

ユーザーアクションが 'setSource（）'をトリガした後にデータソースが設定されているため、その空の負荷がありません – bbg

使用している構文を確認できませんでした。（http://demos.telerik.com/kendo-ui/mvvm/index）、（http://docs.telerik.com/kendo-ui/api/javascript/data/observablearray）、（http://docs.telerik.com/kendo-ui/api/javascript/data/observableobject #configuration）、（http://docs.telerik.com/kendo-ui/framework/mvvm/tutorials/forms） – whipdancer

Telerikサポートは説明/ソリューションを提供してきました。このhttp://dojo.telerik.com/ikulAの例では、treeViewDataは、Kendo UI TreeViewのDataSourceを保持するハッシュオブジェクトです。

<html> 
 
    <head> 
 
    <title>Nested Treeview with Hash OBject and templates</title> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.rtl.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.mobile.all.min.css"> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/angular.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/jszip.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div id="trees-vm"> 
 
     <h1>Trees</h1> 
 
     <ul data-template="tree" data-bind="source: treesData"></ul> 
 
    </div> 
 

 
    <script id="tree" type="text/x-kendo-template"> 
 
    \t <li> 
 
    \t \t <h2 data-bind="text: treeName"></h2> 
 
    \t <div data-role="treeview" data-bind="source: treeViewData['#=treeName#']"></div> 
 
     </li> 
 
    </script> 
 
    <script> 
 
     var viewModel = kendo.observable({ 
 
     treesData:[], 
 
     treeViewData: {}, 
 
     setSource:function(){ 
 
      var trees = []; 
 
      for (i = 1; i < 5; i++) { 
 
      var tree = {}; 
 
      tree.treeName = 'Tree' + i; 
 
      this.treeViewData[tree.treeName] = [ 
 
       { text: "Furniture", items: [ 
 
       { text: "Tables & Chairs", hasChildren: false }, 
 
       { text: "Sofas", hasChildren: false}, 
 
       { text: "Occasional Furniture", hasChildren: false } 
 
       ] }, 
 
       { text: "Decor", items: [ 
 
       { text: "Bed Linen", hasChildren: false }, 
 
       { text: "Curtains & Blinds", hasChildren: false }, 
 
       { text: "Carpets", hasChildren: false } 
 
       ] } 
 
      ]; 
 
      trees.push(tree); 
 

 
      } 
 
      this.set('treesData', trees); 
 
     } 
 
     }); 
 
     kendo.bind($("#trees-vm"), viewModel); 
 
     viewModel.setSource(); 
 
    </script>      
 
    </body> 
 
</html>

出典

2016-06-27 22:49:54 bbg

Kendo Treeの制御データソースMVVMが子ノードを表示しない

答えて

関連する問題