Knockout foreach observableArray seems to not for array of objects

Question

I am not sure why my foreach sections isn't working? The very first data-bind text: Id is working though.

Knockout:

import Knockout from 'knockout';

function ViewModel() {
    var self = this;
    self.Id = ko.observable();
    self.Sections = ko.observableArray();
};

var viewModel = new ViewModel();

ko.applyBindings(viewModel);

$.getJSON("/api/projects/3455", function(data) {
    console.log(data);
    viewModel.Id(data.Id);
    viewModel.Sections(data.Sections);
});

HTML:

<div data-bind="text: Id">
    <div data-bind="foreach: Sections">
        <div data-bind="text: Id"></div>  
    </div>
</div>

Returned JSON:

nemesv · Accepted Answer · 2017-06-30 04:31:23Z

3

The problem is in your html with the first text binding because it replaces the whole content of your top level div element and you lose your foreach.

So you need to move the text binding inside your top div:

<div>
    <div data-bind="text: Id"></div>
    <div data-bind="foreach: Sections">
        <div data-bind="text: Id"></div>  
    </div>
</div>

Or using the containerless binding syntax if you don't like to have the extra div:

<div>
    <!-- ko text: Id --><!-- /ko -->
    <div data-bind="foreach: Sections">
        <div data-bind="text: Id"></div>  
    </div>
</div>

edited Jun 30, 2017 at 4:31

answered Jan 20, 2016 at 6:39

nemesv

140k16 gold badges424 silver badges364 bronze badges

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

4 Comments

Jeroen Over a year ago

Ooh, well-spotted, that's unpredictable view code in the question's post. However, even though I would've also expected the behavior you suggested, it seems that with nor without a top level Id the contents are overwritten. Any thoughts on that?

nemesv Over a year ago

@Jeroen it does not matter what you have in your Id initially. The KO text binding "sets the element’s content to a text node with your parameter value. Any previous content will be overwritten." so the inner elements are lost at the moment when you call ko.applyBindings

Jeroen Over a year ago

Ah yes, you're right, I didn't interpret my own example correctly. My bad!!

Madbreaks Over a year ago

s/loose/lose/

Collectives™ on Stack Overflow

Knockout foreach observableArray seems to not for array of objects

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related