CODEWITHSUNDEEP
knockout.jsforeach
Craig
Craig

Reputation: 402

Knockout foreach Just not Working

All right, I've tried reading documentation; I've tried varying my settings; I've tried everything I can imagine, but I can't get my foreach loop to work. 

var Entry = function(item) {
    this.id = item.id;
    this.locations = item.locations;
    this.read = ko.observableArray(item.read);
    this.subentries = ko.observableArray(item.subentries);
    this.creator = item.creator;
    this.created = item.created;
    this.entry = item.entry;
}

function managerLogModel() {

    var self = this;

    // declare the different components


    // log entries
    this.entries = ko.observableArray();

    this.loadData = function(data) {
        for(i=0;i<data.length;++i) {
            self.entries().push(new Entry(data[i]));
        }
    }

 ...more functions that I don't believe are affecting, since I'm getting
    the console to log the desired data: [Entry, Entry, Entry,...]

}

Everything seems to work on the backend. After this.loadData, I do a console.log(self.entries()) and I get a list of Entry objects.

However, in the template, I can't get anything to work. I've tried:

<div data-bind:"foreach:$data">test</div>
<div data-bind:"foreach:$data.entries">test</div>
<div data-bind="foreach:$data">test</div>
<div data-bind="foreach:$data.entries">test</div>

Interestingly, this was working perfectly before I implemented the Entry model. I could load the JSON right into self.entries(data) and the template would render the data properly (albeit I had to use data-bind: not data-bind=)

Can anyone point me in the right direction?

EDIT: Strange syntax shown below; only works with data-bind:foreach:

<!-- ko foreach: paginated -->

   <div class="entry" data-bind:"foreach:entries">

        <div class="entry-header">

....

Upvotes: 2

Views: 996

Answers (1)

Roy J
Roy J

Reputation: 43881

data-bind is always followed by =. $data is for use inside a foreach, so you don't want that. If you push to the contents of an observableArray, Knockout doesn't notice the changes. You have to push to the observableArray itself.

So you want

<div data-bind="foreach: entries">test</div>

and

self.entries.push(new Entry(data[i]));

Upvotes: 2

Related Questions