ノックアウトのChrome Bug？

Question

ノックアウトを使用して階層を表示するツリービューを開発しました。私は、クロムの中で奇妙な状況に気付きました。これは、ツリーのノードを崩壊させるときに起こります。ノードのテキストは、その下の項目とともに消えます。私は自分のコードに何か問題があったと思って、それがIEとFirefoxの両方で正しく動作することを理解しました。私は、私のページから余分なコードを取り除いた問題を示す下のフィドルを作成しました。ノードを展開して折りたたむと（プラスボタンがフルコードのようにマイナスに変わらない）、テキストは消えます。次に、ページのどこかをクリックするだけで、テキストをバックアップして表示することができます。

消えたテキストが、私は4台のマシン上で、それがない各1でこれをテストしているコメントで推奨されているように赤で概説されており、スクリーンショット

で見ることができます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>

Answer 1

可視のバインディングを変更してテンプレートのifパラメータを使用するように修正できました。なぜこれで解決するのかわからないが、そこに行く。

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

fiddle

これは、マークアップは、明らかname要素に変更されていないので、クローム特定のバグのように見えるん。折りたたまれたらどこかをクリックするだけで表示されます。おそらくレンダラーのバグ？

Answer 2

私は、競合する答えを期待して、あるいは自分の答えを持ついくつかの助けが、その間でいる：ここで回避策があります。そのdisplayプロパティには、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; }

<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：これを参照してください。あなたの質問の他の部分に答えるために、これは確かにChromeのバグです