Javascript 数据绑定到jsTree

我想做的是使用JS框架将一些动态数据绑定到jsTree，即tree中的树组件。我顺便使用了，但是这个问题是完全独立于框架的。目前，jsTree似乎只支持在初始化时设置树数据，即调用$.jsTree时，这不是我想要的，因为我的数据会随着时间的推移而改变，我希望这会反映在树本身中

最明显的方法是绑定到HTML，然后在这些元素上创建jsTree，这是行不通的，因为jsTree在初始化时会从DOM中删除原始HTML：

<div id="jsTree">
    <!--This is all destroyed :( -->
    <ul>
        <li v-repeat="nodes"> {{$value}} </li>
    </ul>
</div>

但是，如果您只是使用DOM，并在初始化后手动将节点添加到树中，它看起来很好。但是，在框架编译完页面后，您不能毫无困难地将数据绑定到DOM

---

那么如何将jsTree用于数据绑定呢？

因为我没有找到现有的解决方案，所以我自己做了两个

首先是。这正是我写这篇文章时想要的。例如，使用DOM模板创建标准HTML元素的隐藏树，然后插件将该树转换为jsTree，动态更新以跟上DOM更新

然而，我最终意识到这实际上不是一个很好的解决方案，因为范围数据被复制了4次。如果您考虑一下用于生成jsTree的原始范围数据，该数据在框架的范围1中存储了一次，在绑定到2的DOM视图中存储了一次，在jsTree json数据3中存储了一次，在jsTree DOM 4中存储了一次

---

鉴于此，我创建了一个库，它创建了类似于jsTree的树视图，但是声明性的，这意味着您只需将数据绑定到DOM，然后应用.botany类，它突然看起来像一棵树。数据不会经过一系列复杂的转换，并且会自动更新，因为CSS就是这样工作的。这个项目还没有完全完成，但我建议大家看一看，如果可以的话，可以提供一些建议或贡献

我使用$templateRequest在angularjs中实现了一些东西，您可以通过其URL加载模板，而无需将其嵌入HTML页面。如果模板已经加载，例如，在Angularjs控制器中单击按钮

app.controller('testCtrl', function($scope, $templateRequest, $sce, $compile){

   $scope.MakeTemplateToJsTree = function () {

         var templateUrl = $sce.getTrustedResourceUrl('Security/UlListTemp');

         $templateRequest(templateUrl).then(function (template) {

             $compile($("#boxTree").html(template).contents())($scope);

         }, function () {
       
        });

      // this NodeList array will bind to ng-repeat
       $scope.NodeList = [];
   


       setTimeout(function () {
            $('#jstree_demo_div').jstree();
        }, 300)

    }
 });

//jstree_demo_div是asp.net MVC中的一个局部视图，它具有像ng repeat这样的完整功能 我将我的部分视图共享为模板_UlListTemp.chtml

<div id="jstree_demo_div">
   <ul class="sidebar-menu">
      <li class="treeview" ng-repeat="n in NodeList" id="li{{n.Id}}">
        <a href="#">
            <span>{{n.ModuleName}}</span>
        </a>
        <ul class="treeview-menu">
            <li ng-repeat="p in n.ProgramList">
                <a>
                            <span>{{p.ApplicationName}}</span>
                </a>
            </li>

        </ul>
    </li>
</ul>