Chrome Bug mit Knockout?

Question

Ich habe eine Strukturansicht entwickelt, die Knockout verwendet, um eine Hierarchie anzuzeigen. Ich habe eine seltsame Situation innerhalb von Chrome bemerkt, die passiert, wenn ich einen Knoten im Baum zusammenfalte. Der Text für den Knoten verschwindet zusammen mit den darunter liegenden Elementen. Ich dachte mir, dass etwas mit meinem Code nicht in Ordnung ist, und habe dann herausgefunden, dass es sowohl in IE als auch in Firefox korrekt funktioniert. Ich habe unten die Geige erstellt, die das Problem mit einem zusätzlichen Code auf meiner Seite demonstriert. Wenn Sie einen Knoten erweitern und dann ausblenden (der Plus-Button ändert sich nicht wie in meinem vollständigen Code), verschwindet der Text. Dann können Sie einfach irgendwo auf die Seite klicken, um den Text wieder anzuzeigen.

Der Text, der in einem Kommentar in rot wurde wie empfohlen skizziert verschwindet und im Screenshot

ich dieses heraus auf 4 Maschinen getestet und auf jeder tut es nicht gesehen werden kann arbeite, wenn ich Chrome verwende. Ist das ein Fehler in Chrome oder mache ich etwas falsch? Kann irgendjemand irgendeine Möglichkeit sehen, dieses Problem zu umgehen, wenn es sich um einen Bug in Chrome handelt?

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>

Answer 1

Ich konnte es beheben, indem Sie die sichtbare Bindung ändern, um stattdessen einen if Parameter auf der Vorlage zu verwenden. Ich weiß nicht, warum das das beheben würde, aber da gehst du hin.

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

fiddle

Dies scheint ein Chrome-spezifische Fehler zu sein, weil das Markup eindeutig für den Namen Element nicht geändert wird. Wenn Sie nach dem Minimieren einfach auf eine beliebige Stelle klicken, wird es angezeigt. Vielleicht ein Fehler im Renderer?

Answer 2

Ich hoffe auf eine konkurrierende Antwort oder etwas Hilfe mit meiner eigenen Antwort, aber in der Zwischenzeit: hier ist eine Abhilfe. Es ist etwas los mit der display Eigenschaft dieses span. Ich habe Ihr Beispiel ziemlich reduziert, konnte das Problem noch immer reproportieren und konnte es mit der Festlegung einer expliziten display Regel "reparieren". Siehe dazu:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-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> 
 
    <span data-bind="text: name" class="node-name"></span> 
 
    <ul data-bind="template: { name: 'itemTmpl', foreach: childNodes }, visible: expanded"></ul> 
 
</li> 
 
</script>

PS. Um einen weiteren Teil Ihrer Frage zu beantworten, vermute ich, dass dies in der Tat ein Bug in Chrome ist.