WinJS: Loading data

Question

I'm trying to develop my first Windows 8 Store app (HTML/JS). I am using the Grid App Template which suites my Needs I think the best. This is my model:

I have three entities: 1. GalleryCategory 2. Gallery 3. GalleryItem. A Gallery is linked to exactly one Category. A GalleryItem is linked to exactly one Gallery...so nothing fancy here...

I'm using the out of the box data.js file to load all categories and all galleries on the Startup of the app. But when I open the galleryDetail.html (which is supposed to Show all the Images of the particular Gallery) I want to load all Images of the Gallery then. (to avoid to much loading on the beginning). And now I'm finally coming to the Point that I do not understand:

How can I manage this?? I mean

WinJS.UI.Pages.define("/pages/galleryDetail/galleryDetail.html", {


        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {

                var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
                element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
                element.querySelector("article .item-title").textContent = item.title;
                element.querySelector("article .item-subtitle").textContent = item.subtitle;
                element.querySelector("article .item-image").src = item.backgroundImage;
                element.querySelector("article .item-image").alt = item.subtitle;
                element.querySelector("article .item-content").innerHTML = item.content;
                element.querySelector(".content").focus();
                var galleryId = item.key;

                WinJS.xhr({ url: "http://someUrlToAnAspNetWebsite/Handlers/GalleryItemsHandler.ashx?galleryId=" + galleryId }).done(

                    // Complete function
                    function (response) {
                        var items = JSON.parse(response.responseText);

                        items.forEach(function (item) {
                            galleryItemsList.push(item);
                        });

                        dataList = new WinJS.Binding.List(galleryItemsList);
                        var galleryItemsListView = document.getElementById('galleryItemsListView').winControl;
                        galleryItemsList.itemDataSource = dataList.dataSource;
                    },

                    // Error function
                    function (response) {
                        // handle error here...
                    },

                    // Progress function
                    function (response) {
                        // progress implementation goes here...
                    }
                );
        },

my Problem is obivous...the ready function continues / Ends before the data is retrieved...as the async call takes a while.

But I thought using the promise (.done()) will do this for me (synchronising the threads)?? Or do I need to use the join() function. If so, where and how?? Sorry for my issues with this...

Thanks for any help...

Answer 1

The ready function itself is an async function, so you only have to return a promise to tell its caller that its not done until some promise is resolved. So you can fix your issue with 7 key strokes. Just add return before the WinJS.xhr call.