javascript - Knockout.js use foreach to display object properties -
i have viewmodel load users , list of socialgraphs wcf services. users appear correct no socialgraph entry appears. have checked service , json returned , seems ok.
should change models sth different or way i'm loading stuff in viewmodel?
$(document).ready(function () { var viewmodel = { users: ko.observablearray([]), loadusers: function () { odata.read("service_userprofile/", function (data) { viewmodel.users.removeall(); $.each(data.results, function (index, item) { var socialgraphs = viewmodel.loadsocialgraph(); var user = new userprofilemodel(item, socialgraphs); viewmodel.users.push(user); }); }); }, loadsocialgraph: function () { var result = new array(); // user id loaded dynamically in later steps odata.read("/service_userprofile(1)/socialgraph/", function (data) { $.each(data.results, function (index, item) { result.push(new socialgraph(item)); }); }); return result; } }; ko.applybindings(viewmodel); viewmodel.loadusers(); });
the model
function userprofilemodel(item,socialgraphs) { this.id = ko.observable(item.id), this.nickname = ko.observable(item.nickname), this.socialgraphs = ko.observablearray(socialgraphs) }; function socialgraph(item) { this.id = ko.observable(item.id), this.starttime = ko.observable(item.starttime), this.latitude = ko.observable(item.latitude), this.longitude = ko.observable(item.longitude) }; the view
<table> <thead> <tr> <th>user id</th> <th>nickname </th> <th>social graph </th> </tr> </thead> <tbody data-bind="foreach: users"> <tr> <td data-bind="text: id"></td> <td data-bind="text: nickname"></td> <td> <ul data-bind="foreach: socialgraphs"> <li data-bind="text: id"></li> <li data-bind="datestring: starttime"></li> <li data-bind="text: latitude"></li> <li data-bind="text: longitude"></li> </ul> </td> </tr> </tbody> </table>
you should change:
loadsocialgraph: function () { var result = ko.observablearray(); // user id loaded dynamically in later steps odata.read("/service_userprofile(1)/socialgraph/", function (data) { $.each(data.results, function (index, item) { result.push(new socialgraph(item)); }); }); return result; } and
function userprofilemodel(item,socialgraphs) { this.id = ko.observable(item.id), this.nickname = ko.observable(item.nickname), this.socialgraphs = socialgraphs }; why:
@ line this.socialgraphs = ko.observablearray(socialgraphs)
socialgraphs in right part []. after time interval filled values. , because of not observable array, knockout won't notice items pushed in it. i.e. stay empty.
