Question

我开发了一个使用knockout来显示层次结构的树视图。我注意到当我折叠树中的节点时，chrome中出现了一种奇怪的情况。节点的文本随其下的项目一起消失。我想我的代码有问题，然后发现它在IE和Firefox中都能正常工作。我创建了下面的小提琴，演示了我的页面中的任何额外代码被剥离的问题。如果展开节点然后折叠它（加号按钮不会像在我的完整代码中那样变为减号），文本就会消失。然后，您只需单击页面上的任意位置即可显示备份文本。

消失的文字已按照评论中的建议以红色标出，并可在屏幕截图中看到

我已经在4台机器上对其进行了测试，而且每台机器在使用Chrome时都无法正常工作。这是Chrome中的错误，还是我做错了什么？此外，如果Chrome中存在错误，任何人都可以找到解决此问题的方法吗？

Example Fiddle

＆＃13;

console.clear();

var hierarchyNode = function (parent) {
    var self = this;
    this.name = "Node Name";
    this.hasChildren = ko.observable(true);
    this.childNodes = ko.observableArray();
    this.expanded = ko.observable(false);
};

hierarchyNode.prototype = {
    name: null,
    hasChildren: null,
    childNodes: null,
    getChildNodes: function (element, event) {
        if (element.hasChildren() === true && element.childNodes().length === 0) {
            element.childNodes.push(new hierarchyNode(element));
        }

        element.expanded(!element.expanded());

    }    
};

var hierarchyVM = function () {
    var self = this;

    self.hierarchyNodes = ko.observableArray();
    self.selectItem = function () {};
};

var vm = new hierarchyVM();

vm.hierarchyNodes.push(new hierarchyNode(null));

console.log(vm.hierarchyNodes()[0]);
ko.applyBindings(vm);

＆＃13;

ul.tree {
    list-style-type: none;
    padding-left: 10px;
}
.hierarchyNode {border: 1px solid red;}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tree" data-bind="template: { name: 'itemTmpl', foreach: $data.hierarchyNodes }"></ul>
<script id="itemTmpl" type="text/html">
                <li>
                    <button data-bind="click: getChildNodes">+</button>
                                    <div data-bind="visible: hasChildren() == false" class="tree-spacer"></div>
                    <span data-bind="text: name" class="no_selection hierarchyNode"></span>
                    <ul class="tree" data-bind="template: { name: 'itemTmpl', foreach: $data.childNodes }, visible: expanded"></ul>
                </li>
            </script>

＆＃13;

Answer 1

我能够通过更改可见绑定来修复它，而不是在模板上使用if参数。我不知道为什么会修复它，但你去了。

<ul data-bind="template: { name: 'itemTmpl', foreach: childNodes, 'if': expanded }"></ul>

fiddle

这似乎是Chrome特定的错误，因为明显没有为name元素更改标记。只需在折叠后点击任意位置即可显示。渲染器中的错误可能是？

Answer 2

我希望得到一个相互竞争的答案，或者对我自己的答案有所帮助，但同时也是如此：这是一个解决方法。 display的{{1}}属性有所不同。我已经减少了你的例子，仍然可以重现问题，并且能够通过设置明确的span规则来“修复”它。见：

display

var hierarchyNode = function (parent) {
  var self = this;
  
  self.name = "Some node";
  self.childNodes = ko.observableArray([]);
  self.expanded = ko.observable(false);
  
  self.getChildNodes = function (element, event) {
    if (self.childNodes().length === 0) {
      self.childNodes.push(new hierarchyNode(self));
    }

    self.expanded(!self.expanded());
  }
};

var hierarchyVM = function () {
  var self = this;

  self.hierarchyNodes = ko.observableArray([new hierarchyNode(null)]);
};

ko.applyBindings(new hierarchyVM());

.node-name { border: 1px solid red; }

/* Workaround: */
.node-name { display: inline-block; }

PS。要回答你问题的另一部分，我的猜测是这确实是Chrome中的一个错误。

Chrome Bug with Knockout？

2 个答案: