CODEWITHSUNDEEP
knockout.js
comfreakph
comfreakph

Reputation: 541

how to use components in knockoutjs using foreach

I have this sample component usage using foreach, this is my component in html:

<followers params="value:followers"></followers>

in js:

ko.components.register("followers", {
viewModel: function (params) {
    this.listValue = params.value();
    console.log(this.listValue);
},
template:"<ul class='list-inline friends-list' data-bind='foreach:listValue'><li data-bind='text:person'></li></ul>"});

see the full script in here https://jsfiddle.net/comfreakph/em0u592c/

the data in list is empty.

help thanks.

Upvotes: 0

Views: 238

Answers (1)

Aleksandar Gajic
Aleksandar Gajic

Reputation: 1359

You are binding image property and its missing from the data set, add it and it will work

 self.followers = ko.observableArray([
     { "person": "John Doe", image: '' },
    { "person": "Peter Mark", image: '' },
    {"person": "John Paul", image: ''}
 ]);

I've updated your code and now its working, check here:https://jsfiddle.net/em0u592c/6/

One more thing i've noticed in your fiddle code is wrong data "person:": "John Doe". You have extra column in person.

Upvotes: 1

Related Questions