CODEWITHSUNDEEP
javascriptknockout.js
chris stevens
chris stevens

Reputation: 326

As binding knockout undefined nested foreach

So I have html:

<div class="body" data-bind="foreach: { data: Sections }">
            <span data-bind="text: '(' + OrderQualifier + ') ' + Text">
            </span>
            <p data-bind="foreach: { data: Children, as: 'child' }">
                <fieldset class="section-edit" data-bind="visible: IsEditing">
                    <input type="text" data-bind="attr: {value: child.EditedText}" /><!-- child is undefined here even though I have it as my as binding on the above foreach-->
                    <button data-bind="event: {click: $root.addEdit}">Submit</button>
                </fieldset>
            </p> 
        </div>

I tried to do this without the as binding but it was pulling the value from the parent section which also has an EditedText property and get the same result using $data.

The data (Sections) i'm trying to bind looks like:

[  
   {  
      "SectionID":1,
      "Text":"Parent text",
      "Html":null,
      "OrderQualifier":"1",
      "IsUserCreated":false,
      "Children":[  
         {  
            "SectionID":2,
            "Text":"Child text",
            "Html":null,
            "OrderQualifier":"1",
            "IsUserCreated":false,
            "EditCount":0,
            "ExplanationCount":0,
            "EvidenceCount":0,
            "IsEditing":true,
            "EditedText":"Child text"
         }
      ],
      "EditCount":0,
      "ExplanationCount":0,
      "EvidenceCount":0,
      "IsEditing":true,
      "EditedText":"Parent text"
   }
]

Any ideas?

Upvotes: 0

Views: 431

Answers (2)

wes
wes

Reputation: 168

Or use virtual elements if you want to keep using the <p> tags

<!-- ko foreach: { data: Children, as: 'child' } -->
        <p>
        ...
        </p> 
<!-- /ko -->

http://jsfiddle.net/cvtw3b2h/2/

Upvotes: 1

Jan Sommer
Jan Sommer

Reputation: 3808

Pretty weird, but try changing

<p data-bind="foreach: { data: Children, as: 'child' }">
....
</p>

to

<div data-bind="...">...</div>

http://jsfiddle.net/cvtw3b2h/1/

Upvotes: 0

Related Questions