Estoy tratando de crear un menú basado en una matriz observable llena de elementos de menú. También tengo div que deberían ser visibles cuando se hace clic en el elemento del menú, el problema es que estos div tenían enlaces visibles en función de la posición de la matriz de su elemento de menú especificado. Esto funcionó hasta que intenté eliminar / agregar algún elemento de menú a la matriz y me di cuenta de que es una forma horrible de vincular los elementos de menú a los divs.

Como solución, decidí usar una matriz observable de clave / valor para que no importara si se agregaba o eliminaba un elemento del menú. Conseguí que esto funcione para elementos de menú individuales con enlaces, pero no puedo hacer que funcione con un bucle foreach (para mostrar un conjunto de elementos de menú).

Aquí está el violín:http://jsfiddle.net/Dennis50/uu2u90my/

Por ejemplo, conseguiría que esto funcione:

<h2 data-bind="text: $root.parentArray()[0].project.childObservableArray()[0].klimaat.destUrl()"></h2>

Pero cuando trato de que funcione para varios elementos del menú, no puedo hacer que esto funcione:

<div data-bind="foreach: $root.parentArray()[0].project.childObservableArray()[0]">
   <h2 data-bind="text: destUrl()"></h2>    
</div>

Entonces, ¿cómo enlazo estos elementos de menú usando el bucle foreach y es incluso la mejor solución para este problema?