Инициализация меню аккордеона Bootstrap в нокаут

Question

Вот мой пример меню аккордеона, которое должно использовать данные в формате, совместимом с JSON. У меня есть структура данных, но привязка между данными и HTML не работает. Какие поправки следует внести для отображения этой многоуровневой структуры в двухуровневом меню?

var confItems = { 
 
    "children":ko.observableArray() 
 
}; 
 
var childrenLength = 3; 
 
console.log("A",confItems); 
 
for (var i = 0; i < childrenLength; i++) { 
 
    confItems.children.push({ 
 
    "idhash": ko.observable("#col-" + (i + 1)), 
 
    "id": ko.observable("col-"+ (i + 1)), 
 
    "displayLabel": ko.observable("Item " + (i + 1)), 
 
    "children": ko.observableArray() 
 
    }); 
 
    console.log("B",confItems); 
 
    for (var j = 0; j < childrenLength; j++) { 
 
    confItems.children()[i].children().push({ 
 
     "idhash": ko.observable("#col-" + (i + 1) + "-" + (j + 1)), 
 
     "id": ko.observable("col-" + (i + 1) + "-" + (j + 1)), 
 
     "displayLabel": ko.observable("Item " + (i + 1) + "." + (j + 1)), 
 
     "children": ko.observableArray() 
 
    }); 
 
    console.log("C",confItems); 
 
    } 
 
    console.log("D",confItems); 
 
} 
 
console.log(confItems); 
 
var viewModel = function() { 
 
    this.tree = ko.observable(confItems); 
 
}; 
 
ko.applyBindings(new viewModel());

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div class="panel-group"> 
 
    <div id="accordion" class="panel panel-default" data-bind="foreach: { data: tree.children, as: child}"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
\t \t \t \t \t \t \t \t \t <a data-toggle="collapse" data-parent="#accordion" 
 
\t \t \t \t \t \t \t \t \t \t data-bind="text:child.displayLabel, attr:{href:child.idhash}">First level</a> 
 
\t \t \t \t \t \t \t \t </h4> 
 
    </div> 
 
    <div data-bind="attr:{id:child.id}" class="panel-collapse collapse"> 
 
     <div class="panel-body" data-bind="foreach: { data: child.children, as: child}"> 
 
     <div class="panel-heading"> 
 
      <a data-bind="text:child.displayLabel">Second level</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Вы должны:

1. отделить foreach аргументы запятыми, и как @Roy J писал ниже, ребенок должен быть в кавычках, как: "foreach: { data: tree.children, as: 'child'}" вместо foreach: { data: tree.children as: child}

2. Изменение this.tree = ko.observable(confItems); к this.tree = confItems;

Проверить скрипку - Fiddle