Question

我要做的是使用JS框架将一些动态数据绑定到jsTree（即来自this library）树的树组件。我偶然使用vue.js，但这个问题完全与框架无关。目前看起来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如何与数据绑定一起使用？

Answer 1

由于我没有找到现有的解决方案，我自己制作了两个解决方案。

首先是jsTreeBind。当我发这篇文章时，它完全符合我的要求。您使用DOM模板（例如<div>s）创建标准HTML元素的隐藏树，然后插件将此树转换为jsTree，即时更新以跟上DOM更新。

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

因此，鉴于此，我创建了 Botany ，一个创建树视图的库（如jsTree），但是声明性地，这意味着你只需绑定数据到DOM，并应用.botany类，它突然看起来像一棵树。数据不会经过一系列复杂的变换，并且会自动更新，因为这就是CSS的工作原理。该项目尚未完全完成，但我建议您一看，如果可以，请提供建议或贡献！

Answer 2

我在angularjs中遇到了麻烦，可以使用$ templateRequest通过模板的URL加载模板，而不必将其嵌入到HTML页面中。例如，如果模板已经加载，则在按钮上单击Angularjs Controller

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在UlListTemp中是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>

数据绑定到jsTree

2 个答案: