0

所以参考这个jsfiddle： http: //jsfiddle.net/Gaa3G/我正在尝试混合一些javascript函数来操作带有淘汰视图模型的dynatree。代码被调用但没有发生任何事情（除了我的调试警报出现了）。

查看（html）： 

<script id="itemTmpl" type="text/html">
    <li>
        <span >
            <span data-bind="text: name" />
            <input type="checkbox" data-bind="checked: isManager" />
        </span>
        <ul data-bind="template: { name: 'itemTmpl', foreach: children }"></ul>
    </li>
</script>
<button data-bind="click: addNodes">Add Nodes</button>

Viewmodel：（反正一部分，其余的可以在jsfiddle上看到）

            self.addNodes = function() {
                alert("I'm adding a node...");
                var rootNode = $("#dynatree").dynatree("getRoot");
                var childNode = rootNode.append({
                    title: "Programatically addded nodes",
                    tooltip: "This folder and all child nodes were added programmatically.",
                    isFolder: true
                });
                childNode.append({
                    title: "Document using a custom icon",
                    icon: "customdoc1.gif"
                });
            };

在我的开发计算机上，我看到相同代码的错误说“在初始化之前无法调用 dynatree 上的方法；试图调用方法 'getRoot'”，但我在 jsfiddle 上没有看到这个错误。这可能有关系，也可能没有关系！

那么我在这里错过了什么吗？这是特定插件（dynatree）的一些神秘问题吗？（我猜不会，因为谷歌搜索其他与 jquery 相关的插件时出现了很多类似的错误消息，这些插件似乎与敲除自定义绑定处理程序中的“setTimeOut”有关。我不知道为什么 setTimeout在那里，我只是从原始的 jsfiddle 复制它！

编辑1：所以我想到更新可观察数组 - 毕竟，这就是树的绑定！

我将此添加到我的“addNodes”方法中：

            var bob = new Person({
                id: 3,
                name: 'Bob',
                isManager: true,
                children: []
            });
            self.persons.push(bob);

你瞧，“bob”确实被添加到了树中。

这可能成为一个问题的地方是向特定节点添加一些东西，因为树似乎仍然认为它在绑定到视图模型时没有初始化，这会阻止诸如“getRoot”之类的工作。希望马丁会在某个时候出现并就此发表意见！

4

1 回答 1

0

基本上，您在错误的节点上调用 .dynatree() 。

您在内部元素上有 data-bind="dynatree:{}" UL，而不是在#dynatree元素上。因此，这UL是根节点。

以这种方式更新它：

             self.addNodes = function() {
                alert("I'm adding a node...");

                // use the correct selector below:
                var rootNode = $("#dynatree > ul").dynatree("getRoot");

                // call the proper method .addChild instead of .append
                var childNode = rootNode.addChild({
                    title: "Programatically addded nodes",
                    tooltip: "This folder and all child nodes were added programmatically.",
                    isFolder: true
                });
                childNode.addChild({
                    title: "Document using a custom icon",
                    icon: "customdoc1.gif"
                });
            };

更新的演示

于 2013-08-06T20:12:24.737 回答