Question

尝试通过更新视图模型动态刷新多个kendo树视图控件的数据源。呈现父节点但子节点不会显示。

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/

有人知道为什么这不起作用吗？

Answer 1

Telerik支持提供了解释/解决方案：

当Kendo UI TreeView的DataSource嵌套在ul模板绑定的每个对象中时，似乎存在问题。在这个http://dojo.telerik.com/ikulA示例中，treeViewData是一个哈希对象，它包含Kendo UI TreeView的DataSource。

＆＃13;

<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">
  	<li>
  		<h2 data-bind="text: treeName"></h2>
    	<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>

＆＃13;

更新Kendo Tree控件数据源MVVM不显示子节点

1 个答案: