knockout 2, nested foreach

[Lucius Vorenus]

Any examples of nested foreach binding? This is doesnt work

function ProgramViewModel() {
this.Trainings = ko.observableArray([new Training("training 1"),
new Training("training 2"), new Training("training 1")]);
}

function Training(name) {
this.Name = name;
this.Exercises = ko.observableArray([new Exercise("one"), new
Exercise("two"), new Exercise("three")]);
}

function Exercise(name) {
this.Name = name;
}

ko.applyBindings(new ProgramViewModel());



<ul data-bind="foreach: Trainings">
<li data-bind="text: $data.Name">
<ul data-bind="foreach: $data.Exercises">
<li data-bind="text: Name"></li>
</ul>
</li>
</ul>

[mcoolin]

http://knockoutjs.com/examples/collections.html 

Works like a charm

[Lucius Vorenus]

thx, but my example doesnt. What im doing wrong?

[Koviko]

Firstly, you don't need to use "$data," as it is implied. Secondly, you are overwriting your list with a text binding. I assume what you meant is this:

<ul data-bind="foreach: Trainings"> 

  <li>

    <span data-bind="text: Name"></span>

    <ul data-bind="foreach: Exercises"> 

[Lucius Vorenus]

what does it mean "overwriting your list with a text binding"?

[JohnEarles]

>> what does it mean "overwriting your list with a text binding"?

Your HTML was this:

<li data-bind="text: $data.Name">
<ul data-bind="foreach: $data.Exercises">

<li data-bind="text: Name"></li>
</ul>
</li>

The top binding (<li data-bind="text: $data.Name">) is telling
Knockout to set the innerText (or textContent) for your outer li
element. This text replaces everything in between the starting and
ending tag, so it results in: <li>$data.Name</li> - overwriting your
<ul> elements HTML with the Name text.

[Lucius Vorenus]

got it! Thank you very much guys!