Using Knockout 2.3.0 with the jQuery Templates Plugin 1.0.0pre when access Facebook Albums and Photos,
Using a dependentObservable with a call to an authenticated Facebook user's account for any photos within a known album id

ko.dependentObservable(function () { var id = 'me'; if (viewModel.currentAlbum()) { id = viewModel.currentAlbum().id; } viewModel.loadingPhotos(true); FB.api(id + '/photos', { limit: 11, offset: viewModel.currentPage() * 10 }, function (response) { var truncatedResponse = response.data; if (truncatedResponse.length > 10) { truncatedResponse.pop(); //remove the excess item viewModel.nextPage(true); } else { viewModel.nextPage(false); } viewModel.photoItems(ko.utils.arrayMap(response.da ta, function (s) { return s; }, viewModel)), viewModel.loadingPhotos(false); }); }, viewModel);With a ViewModel

var viewModel = { userId: user.id, userName: user.name, loadingPhotos: ko.observable(true), albums: ko.observableArray([]), photos: ko.observableArray([]), photoItems: ko.observableArray([]), currentPage: ko.observable(0), nextPage: ko.observable(false), currentPhoto: ko.observable(undefined), currentAlbum: ko.observable(undefined), selectPhoto: function (photo) { viewModel.currentPhoto(photo); }, submitImage: function () { if (viewModel.currentPhoto()) { $('#resultPane').show(); $('#resultImage').attr('src', viewModel.currentPhoto().source); $('#container').hide(); } }, };and some markup

There are no photos in this album


Loading...
< >
And a template markup as such;

example of the response.data
{

"id": "10151241718347535","from": { "name": "Foo Foo MyAlbums", "id": "631022535" },"picture": "https:\/\/fbcdn-photos-b-a.akamaihd.net\/hphotos-ak-frc3\/417631_10151241718347504_140582535_s.jpg","source" : "https:\/\/fbcdn-sphotos-b-a.akamaihd.net\/hphotos-ak-frc3\/s720x720\/417631_10151241718347504_140582535_n.jpg","height" : 540,"width": 720,"images": [{ "height": 1536, "width": 2048, "source": "https:\/\/fbcdn-sphotos-b-a.akamaihd.net\/hphotos-ak-frc1\/858093_10151241718347504_140582535_o.jpg" }, { "height": 960, "width": 1280, "source": "https:\/\/fbcdn-sphotos-b-a.akamaihd.net\/hphotos-ak-frc1\/p960x960\/858093_10151241718347504_140582131_o.jpg" }, { "height": 720, "width": 960, "source": "https:\/\/fbcdn-sphotos-b-a.akamaihd.net\/hphotos-ak-frc3\/417631_10151241718347504_140582535_n.jpg" }, { "height": 600, "width": 800, "source": "https:\/\/fbcdn-sphotos-b-a.akamaihd.net\/hphotos-ak-frc1\/p600x600\/858093_10151241718347504_140582535_o.jpg" }, { "height": 480, "width": 640, "source": "https:\/\/fbcdn-sphotos-b-a.akamaihd.net\/hphotos-ak-frc3\/p480x480\/417631_10151241718347504_140582535_n.jpg" }, { "height": 320, "width": 426, "source": "https:\/\/fbcdn-sphotos-b-a.akamaihd.net\/hphotos-ak-frc3\/p320x320\/417631_10151241718347504_140582535_n.jpg" }, { "height": 540, "width": 720, "source": "https:\/\/fbcdn-sphotos-b-a.akamaihd.net\/hphotos-ak-frc1\/p180x540\/858093_10151241718347504_140582535_o.jpg" }, { "height": 130, "width": 173, "source": "https:\/\/fbcdn-sphotos-b-a.akamaihd.net\/hphotos-ak-frc3\/p130x130\/417631_10151241718347504_140582535_n.jpg" }, { "height": 225, "width": 300, "source": "https:\/\/fbcdn-sphotos-b-a.akamaihd.net\/hphotos-ak-frc3\/p75x225\/417631_10151241718347504_140582535_n.jpg" }],"link": "https:\/\/www.facebook.com\/photo.php?fbid=101512417183475354&set=a.1015124171 8337504.1073741825.631022505&type=1","icon": "https:\/\/fbstatic-a.akamaihd.net\/rsrc.php\/v2\/yz\/r\/StEh3RhPvjk.gif","created_time": "2013-03-01T04:17:31+0000","updated_time": "2013-03-01T04:17:31+0000"}
What seems to happen with the 'viewModel.photoItems' is that the observableArray contains a single entry(when the know results are greater than 1) and we're unable to access the property value of the foreach item(s) inside the template ie: 'photo.picture' As an alternate, I have tried using viewModel.photos(response.data) without success. Any suggestions are appreciated.


View Solution