Binding 敲除绑定不适用于jsTree

我试图让jsTree（1.0-rc3）与Knockout.js（2.2.1）一起工作

参见示例JSFIDLE：

注意：我在Fiddle中包含了几个JS资源，以尽可能地匹配我的visualstudio项目，以防库之间发生冲突，这可能会导致此问题

运行Fiddle并在jsTree中导航，它是按物理位置和类型列出的服务器列表。打开Firebug的控制台有助于查看ajax调用和响应。单击叶节点时，会发出ajax调用以检索服务器详细信息并显示其值使用敲除绑定的表单。我在选择非叶节点时隐藏表单

它在您第一次单击叶节点时起作用。之后，Knockout不会更新叶节点单击的表单。但是，如果您碰巧单击了“编辑”按钮，则会突然显示最新的服务器详细信息

我认为jsTree和Knockout绑定之间存在冲突，但不知道从哪里开始解决可能出现的问题

由于stackoverflow显然至少需要一个代码块，下面是Fiddle的JavaScript部分：

// Global vars:
var prevJsTreeNodeId = null;
var serverModelBindingsApplied = false;
var serverLoadInProgress = false; 

/*
 * The knockout.js view model
 */
var ServerViewModel = function () {
    // Data
    var self = this;
    self.IsReadOnly = ko.observable(true);       // the form's input mode
    self.btnEditSave = ko.observable("Edit");    // the Edit/Save button text
    self.Server = ko.observable({});             // the Server object

    // Operations
    self.setEditable = function () {
        self.IsReadOnly(false);
        self.btnEditSave("Save");
    };

    self.setReadOnly = function () {
        self.IsReadOnly(true);
        self.btnEditSave("Edit");
    };

    self.doEditSave = function () {
        var flag = self.IsReadOnly();
        if (flag) {
            // switch to Edit mode
            self.setEditable();
        }
        else {
            // switch back to readOnly
            self.setReadOnly();
        }
    };

    // use ajax to update the knockout.js view model's Server object for the specified server name
    self.load = function (serverName) {
        if (!serverLoadInProgress) {
            serverLoadInProgress = true;
            // use ajax to retrieve the server's details
            var data = {
              json: JSON.stringify({
                   ServerName: serverName,
                   PrimaryIP: "1.2.3.4",
                   BrandDesc: "Dell",
                   OSDesc: "Windows 2003 Server",
                   Location: "xyz"
              }),
              delay: 1
            };
            $.ajax({
                url:"/echo/json/",
                data:data,
                type:"POST",
                success:function(response)
                {
                   console.log(response);
                   window.ServerViewModelInstance.Server = ko.mapping.fromJS(response);
                   // apply bindings the first time we retrieve a Server object
                   if (!serverModelBindingsApplied) {
                      ko.applyBindings(window.ServerViewModelInstance,
                                       document.getElementById('servercontent'));
                      serverModelBindingsApplied = true;
                   }  
                   else {
                     // hmmm... updating the view model's .Server property doesn't trigger the 
                     //  form to be updated, yet if we click the Edit button, the new values
                     //  suddenly appear, so try emulating that here...
                     self.setReadOnly();
                   }
                }
            });

           serverLoadInProgress = false;
        }
    };
};    // ServerViewModel

/*
 * document load 
 */
$(function () {
    // configure the jsTree
    $("#divtree")
      .jstree({
          "themes": { "theme": "default", "dots": true, "icons": true },
          "plugins": ["themes", "html_data", "ui", "types"],
          "types": {
              "type_attr": "tag",   // the attribute which contains the type name
              "max_depth": -2,      // disable depth check
              "max_children": -2,   // disable max children check
              "valid_children": ["root"],
              "types": {
                  "root": {
                      "valid_children": ["level1"]
                  },
                  "level1": {
                      "valid_children": ["level2"],
                      "start_drag": false,
                      "move_node": false,
                      "delete_node": false,
                      "remove": false
                  },
                  "level2": {
                      "valid_children": ["leaf"],
                      // use the theme icon for the level2 nodes
                      "start_drag": false,
                      "move_node": false,
                      "delete_node": false,
                      "remove": false
                  },
                  "leaf": {
                      "valid_children": "none"
                  }
              }
          }
      });

    // register to receive notifications from #divtree when a jsTree node is selected
    $("#divtree").bind("select_node.jstree", function (event, data) {
          // data.rslt.obj is the jquery extended node that was clicked
          var key = data.rslt.obj.attr("key");
          var id = data.rslt.obj.attr("id");
          if (id == prevJsTreeNodeId) {
              // user clicked the same node, nothing to do
              return;
          }
          prevJsTreeNodeId = id;

          // when a jsTree node is selected, reset the knockout.js view model to read only
          window.ServerViewModelInstance.setReadOnly();

          var idx = key.indexOf("Server");
          if (idx === 0) {  // "Server|servername"
              // show the "servercontent" div
              $("#servercontent").show();
              // display the server details
              var serverName = key.substr(idx + 7, key.length);
              window.ServerViewModelInstance.load(serverName);
          }
          else {
              // hide the "servercontent" div
              $("#servercontent").hide();
          }
      });


    // hide the "servercontent" div
    $("#servercontent").hide();

    // instantiate the knockout.js view model
    window.ServerViewModelInstance = new ServerViewModel();
});  // document ready

// initialization timer routine to select the main jsTree node
setTimeout(function () {
    // open the root node
    $.jstree._reference("#divtree").open_node("#root");
}, 500);

---

很抱歉，我下面的格式错误-此编辑器不是我的朋友…：-/
如果我理解的没错，单击的树节点的详细信息面板没有使用正确的数据进行更新-对吗

尝试执行以下操作：
更改：

window.ServerViewModelInstance.Server=ko.mapping.fromJS（响应）

发送至：
window.ServerViewModelInstance.Server（响应）

（例如，不覆盖仅绑定一次的初始ko.observable，而是更新其值）

从你与可观察物的关系来看。。
例如，而不是：
。。。“值：Server.ServerName，…

将其更改为：
..“值：Server（）.ServerName，…

（例如，在访问属性之前执行函数）

当点击树中的新服务器名称节点时，它会工作并更新表单（在firefox中试用）


带有修改代码的示例副本可以在以下位置找到：
没有太多帮助，但IE10似乎没有加载jstree，因此它在这方面不起作用，Opera 12也没有做任何事情，因为第138行的idx不包含服务器。我只看到3个节点，位置、位置1和位置2。这可能是代码存在问题的一个指示器，尽管它们是什么，我不能说，因为有很多问题。您是否尝试过将其剥离回最简单的示例，或者这是您能得到的最简单的示例？@PaulManzotti:看起来由于“mime类型不匹配”错误，IE正在阻止某些js资源，从而阻止jsTree对象被初始化。无论如何，有人找到了答案。谢谢你看。很明显，既然你已经解释过了。。。是我破坏了绑定！非常感谢。