我已经开发了一个使用 knockout 显示层次结构的树形 View 。我注意到chrome中发生了一种奇怪的情况,当我折叠树中的一个节点时会发生这种情况。节点的文本及其下的项目消失。我发现自己的代码有问题,然后发现它在IE和firefox中都可以正常工作。我在下面创建了 fiddle ,用从页面中删除的任何其他代码来演示该问题。如果您先展开一个节点然后再将其折叠(加号按钮不会像我的完整代码中那样变为减号),则文本将消失。然后,您可以单击页面上的任意位置以获取要显示的文本。
消失的文本已按照注释中的建议以红色勾勒出轮廓,并可以在屏幕截图中看到
我已经在4台计算机上对此进行了测试,但是在每台计算机上使用Chrome都无法正常运行。这是Chrome中的错误,还是我做错了什么?另外,如果这是Chrome中的错误,有人可以找到解决此问题的任何方法吗?
Example Fiddle
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);
ul.tree {
list-style-type: none;
padding-left: 10px;
}
.hierarchyNode {border: 1px solid red;}
<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>
最佳答案
我可以通过更改可见的绑定(bind)以在模板上使用if
参数来解决此问题。我不知道为什么会解决这个问题,但是您就可以了。
<ul data-bind="template: { name: 'itemTmpl', foreach: childNodes, 'if': expanded }"></ul>
fiddle
这似乎确实是Chrome的特定错误,因为显然没有更改name元素的标记。折叠后只需单击任意位置即可显示它。渲染器中的错误吗?