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

参考这个JSFIDLE：我试图混入一些javascript函数，用敲除viewmodel操作dynatree。代码正在被调用，但什么也没有发生（除了我的调试警报正在显示）

<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>

查看（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>

在我的dev计算机上，我看到一个错误，代码是“在初始化之前无法调用dynatree上的方法；试图调用方法‘getRoot’”，但在jsfiddle上没有看到这个错误。这可能相关，也可能无关

<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>

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

<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>

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

<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>

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

<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>

你瞧，“鲍勃”真的被添加到树上了

<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时，它似乎仍然认为它没有初始化，这会阻止“getRoot”之类的操作。希望Martin会在某个时候出现，并就此发表意见！

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

<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>

在内部

UL

元素上有data bind=“dynatree:{}”，而不是在

#dynatree

元素上。因此，这个

UL

是根节点

<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>

按以下方式更新：

<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>

             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"
                });
            };

---

我们进行了进一步的实验-请参见相关的编辑1。我们发现实际调用：

$（“#dynatree>ul”）。dynatree（“getRoot”）；

有时仍会给出OP的“初始化前”错误。我们必须在实际调用之前调用

$（“#dynatree>ul”）.dynatree（）

。

<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>