JSTREE脚本异步执行

Question

我已经在我的项目上实现了 JSTREE 一切正常，但最近我遇到了一个问题尽管我设法解决了它的概念，但我仍然不清楚。

我的意思是什么？

JSTREE代码是用jquery文档就绪函数编写的 像这样

$(文档).ready(function() { 
  $("#someid").jstree( { 

    “json_数据”：{
      “数据” ： [{
        “attr”：{“id”：“根”}，
        “数据” ： {
          “标题”：“根”，
          "attr" : { "id" : "root","href" : "#" ,"class" : "jstree-clicked" }
        },
        “孩子们” ： [
              {
              “attr”：{“id”：“节点1”}，
              “数据” ： {
                “标题”：“节点1”，
                “attr”：{“id”：“node-1”，“href”：“#”}
              },
              “孩子们”： [

              ],
              “状态”：“关闭”
            },

              {
              “attr”：{“id”：“节点2”}，
              “数据” ： {
                “标题”：“节点2”，
                “attr”：{“id”：“node-2”，“href”：“#”}
              },
              “孩子们”： [

              ],
              “状态”：“关闭”
            },

              {
              “attr”：{“id”：“节点3”}，
              “数据” ： {
                “标题”：“节点 3”，
                “attr”：{“id”：“node-3”，“href”：“#”}
              },
              “孩子们”： [

              ],
              “状态”：“关闭”
            },

              {
              “attr”：{“id”：“节点4”}，
              “数据” ： {
                “标题”：“节点 4”，
                “attr”：{“id”：“node-4”，“href”：“#”}
              },
              “孩子们”： [

              ],
              “状态”：“关闭”
            },

              {
              “attr”：{“id”：“节点5”}，
              “数据” ： {
                “标题”：“节点 5”，
                “attr”：{“id”：“node-5”，“href”：“#”}
              },
              “孩子们”： [

              ],
              “状态”：“关闭”
            }
     ],
     // 发送ajax请求以获取json数据来构建树的方法
    “阿贾克斯”：{
      “url”：“/my_url/tree”，
      “数据”：函数（焦点元素）{
        返回 { 节点：focus_element.attr ？ focus_element.attr("id") : 0 };
      }
    }
  },

  “主题”：{
    “主题”：“经典”，
    “点”：正确，
    “图标”：正确
  },
  “插件”：[“主题”，“json_data”，“ui”]

})

页面上有一个另一个jquery文档准备就绪功能它将单击锚节点创建但上面的jstree。

$(文档).ready(function() {

 $("a#node-1").click()     

})

现在问题出现了，当页面加载时，树就被构造好了 树已构建，但 node-1 锚链接未被单击。

调试它我发现 console.log 总是显示我和 a#node-1 的空数组，这很奇怪。

我将警报框放在第二个 document.ready 函数中，以查看当我请求节点时是否构建了树。像这样

$(文档).ready(function() {

alert("JSTREE 现在应该创建");

$("a#node-1").click()  

})

但令我惊讶的是，当弹出警报时 JSTREE 仍在构建树。

通过对 javascript 的一些不错的理解，我知道页面本质上是同步的，即页面上的第二个脚本仅在第一个脚本执行时执行，

这让我相信JSTREE是异步运行的。如果是，请任何人分享一些信息在它上面。

顺便说一句，我设法使用 jstree 加载处理程序 实现相同的目标

$("#someid").bind("loaded.jstree",

<前><代码> 函数() { $("a#node-1").click(); })

Answer 1

你的问题有一个有趣的答案：我刚刚发现 jquery.jstree.js (jsTree 1.0-rc3) 中的代码使用 setTimer(...) 在节点上调用 .init() ，即是异步的。我还在其他项目中使用了jsTree 1.0-rc1，它是同步的。

恐怕您不会找到此文档，因为它是实现细节：它取决于您使用的版本。

按照其他人的建议，使用jstree中的事件机制来实现你想要的。
另一方面，Jurgen 关于 DOM 结构的看法是正确的。

(*) 我通过 Github 浏览查看原始代码，似乎更改发生在 2011 年。在此之前您有：

jsTree 1.0-rc1
https://github.com/vakata/jstree/blob/0b8ebb2ba468b4c81e3c7645a9335584ddab41f5/jquery.jstree.js

line 59: instances[instance_id]._init();

而现在，

jStree 1.0-rc3
https://github.com/vakata/jstree/blob /v.pre1.0/jquery.jstree.js

line 162: setTimeout(function() { instances[instance_id].init(); }, 0);

Answer 2

通过阅读 JSTree 文档，我发现了一个有趣的注释：
在页面 http://www.jstree.com/documentation/json_data 第一个代码部分指出

// `state` and `children` are only used for NON-leaf nodes

但是您尝试将它们用作具有子节点的节点。也许这会导致您的问题。

Answer 3

编辑。刚刚检查了文档，我的第一个猜测是正确的，删除​​了其余的。

id 将应用于包含 的

。 而是做

$("li#node-1 > a").click()

。你的CSS选择器是错误的并且永远不会匹配，这与异步树行为无关。

编辑：

现在，如果您的树是异步构造的，并且您需要等待其加载事件，您可以使用以下命令来执行此操作
在初始化树之前编写代码，否则您可能会由于时间竞争条件而丢失加载的事件：

jQuery("#someid").bind("loaded.jstree", function (event, data) {
    $("li#node-1 > a").click();
    # or:
    $(this).jstree("open_node", "node-1");
});

如果您只想在加载时打开节点，而不执行任何复杂的操作
否则，您也可以使用initial_open初始化参数来设置初始打开的节点
根本不用摆弄事件。