数据绑定到 jsTree答案

【问题标题】：Data binding to jsTree数据绑定到 jsTree
【发布时间】：2015-01-25 12:33:07
【问题描述】：

我要做的是使用 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如何与数据绑定一起使用呢？

【问题讨论】：

标签： javascript jquery data-binding jstree

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

我已经在 angularjs 中实现了一些东西，使用 $templateRequest，你可以通过它的 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 在 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>

【讨论】：