更新Kendo樹控件數據源MVVM不顯示子節點

嘗試通過更新視圖模型動態刷新多個kendo樹視圖控件的數據源。父節點被渲染，但子節點不會顯示。更新Kendo樹控件數據源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/

是否有人知道爲什麼不起作用？

來源

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 ＃配置），（http://docs.telerik.com/kendo-ui/framework/mvvm/tutorials/forms） – whipdancer

Telerik的支持已經提供的說明/溶液：

似乎有當用於劍道UI樹視圖的數據源嵌套在每個對象的UL模板被綁定到的問題。在這個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樹控件數據源MVVM不顯示子節點

回答

相關問題