Knockout foreach sub-array not showing up

Question

For reference, here is the jsfiddle of my problem.

Overview of the problem:

I have two lists side by side in the UI but the second list is actually an array of items on the selected item in the first list. So the data structure is like this...

var VM = {
  listOfStuff: [
    {
      subItems: [{},{}]
    },
    {
      subItems: [{},{},{}]
    }
  ]
}

with the UI looking like...

<ul id="list-of-stuff">
  <li></li>
</ul>
<ul id="list-of-subitems-on-list-of-stuff">
  <li></li>
</ul>

The problem is that I use a knockout foreach binding on the 'list-of-stuff' and it works just fine, but the subitems list never shows up. There are no binding errors or any other obvious issues so I'm not sure what I'm doing wrong...

Joseph Gabriel · Accepted Answer · 2013-09-12 13:45:19Z

1

It's usually easiest to use the with binding to manage access to sub-objects. Here's a working fiddle.

<h1>SubItem List</h1>
<!-- ko with: currentStuff -->
    <ul id="subitem-list" data-bind="foreach: subItems">
        <li data-bind="text:number"></li>
    </ul>
<!-- /ko -->

It's important to initialize currentStuff; The with binding will not render any html if its bound value is null or undefined.

edited Sep 12, 2013 at 13:45

answered Sep 12, 2013 at 13:40

Joseph Gabriel

8,5203 gold badges42 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jaboc83 Over a year ago

Perfect! I didn't know the with binding was available using the comment style. Guess I should go re-visit the documentation a bit more. So is it just not possible to access them like foreach: currentStuff.subItems? Is that documented somewhere?

Joseph Gabriel Over a year ago

You can use the child property directly, but you'll lose observability on the parent property. See this fiddle: jsfiddle.net/MWve8/8. Notice two things: the currentStuff requires () in order to get the item value, which contains the subItems property. Otherwise, you're trying to find subItems property on the ko observable function, where it doesn't exist. The other thing, is that you'll need to initialize currentStuff with a subItems property - otherwise, the foreach binding can't create a dependency

Collectives™ on Stack Overflow

Knockout foreach sub-array not showing up

For reference, here is the jsfiddle of my problem.

Overview of the problem:

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

For reference, here is the jsfiddle of my problem.

Overview of the problem:

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related