Question

所以引用这个jsfiddle：http://jsfiddle.net/Gaa3G/我试图在一些javascript函数中混合使用knockout viewmodel来操作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>

视图模型：（无论如何，其余部分可以在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"
                });
            };

在我的开发计算机上，我看到一个错误，这个代码说＆＃34;在初始化之前无法调用dynatree上的方法;试图调用方法＆＃39; getRoot＆＃39;＆＃34;但是我没有在jsfiddle上看到这个错误。这可能是也可能不是相关的！

我在这里错过了一些东西吗？这是特定插件（dynatree）的一些神秘问题吗？（我猜不是因为谷歌搜索中出现了许多类似的错误消息，因为其他与jquery相关的插件似乎与淘汰赛自定义绑定处理程序中的＆＃34; setTimeOut＆＃34;有关.I＆＃39;我不知道为什么setTimeout在那里，我只是从原来的jsfiddle复制它！

编辑1：所以我发现更新了可观察数组 - 毕竟，树是绑定的！

我将此添加到我的＆＃34; addNodes＆＃34;方法：

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

瞧瞧，＆＃34; bob＆＃34;确实已添加到树中。

这可能会成为一个问题，就是在特定节点上添加一些东西，因为树似乎仍然认为它未被初始化，当它绑定到一个视图模型时，这会阻止类似于＆＃34; getRoot＆＃34;工作。希望马丁会在某个时候出现并提出意见！

Answer 1

基本上，你在错误的节点上调用.dynatree（）。

内部UL元素上有data-bind =“dynatree：{}”，而#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"
                });
            };

Updated demo

将javascript函数与knockout，viewmodels和dynatree混合和匹配

1 个答案: