ノックアウトを使用した動的折り畳みリスト

Question

私はノックアウトを使ってデータを生成しています。

<ul class="category-list-group" data-bind="template: {name: 'categoryTemplate', foreach: $data.categoryRoot}"></ul> 

// --- Template 
<script id="categoryTemplate" type="text/html"> 
    <li data-toggle="collapse" class="collapse" data-bind="css: hasChild, attr: {'data-target': '#' + name().replace(/\s+/g, '') }"> 
     <a> 
      <!-- ko text: name--><!-- /ko --> 
     </a> 
     <ul class="collapse" data-bind="template: { name: 'categoryTemplate', foreach: children },attr: { id: name().replace(/\s+/g, '') }"></ul> 
    </li> 
</script> 

結果は、このjsfiddleである：結合templateを使用します。奇妙な部分は、子供とリストを崩壊させるときです。折り畳みリストを修正するにはどうしたらいいですか？

注：jsfiddleでノックアウトバインディングを削除しました。私はちょうどhtml自体を表示する

Answer 1

子供のクリックがそれぞれの親コンテナにバブリングしているので、折り畳みは面白いです。折りたたみをコンテナの代わりに< >タグに移動すると、折りたたみ動作を修正できます。

<ul class="category-list-group"> 
    <li class="collapsed" aria-expanded="false"> 
     <a class="has-child" data-toggle="collapse" data-target="#Concert"> 

https://jsfiddle.net/7kmmh68p/4/

私が見てきた唯一の他の選択肢がするevent.stopPropagationのいくつかの並べ替えを（使用する場合）、子イベントが発生するように、すべての親コンテナまでバブリングなし。