initializeLayout and asynchronous loading


  • Currently I'm loading data asynchronously via data.js as provided by the Grid app template. The problem exists where groupedItems.js (the "Hub" page) calls _initializeLayout in the ready handler before the Data in the global WinJS namespace is set due to the asynchronous nature of the StorageFile class.

    This is part of my data.js file:

    fileNames.forEach(function (val, index, arr) {
        var uri = new Windows.Foundation.Uri('ms-appx:///data/' + val + '.geojson');
        Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri).then(function (file) {
            Windows.Storage.FileIO.readTextAsync(file).then(function (contents) {
                // ... read, parse, and organize the data ...
                // Put the data into the global namespace
                WinJS.Namespace.define("Data", {
                    items: groupedItems,
                    groups: groupedItems.groups,
                    getItemReference: getItemReference,
                    getItemsFromGroup: getItemsFromGroup,
                    resolveGroupReference: resolveGroupReference,
                    resolveItemReference: resolveItemReference

    Seeing as the _initializeLayout function (in groupedItems.js) is called when the user navigates to the groupedItems page, how do I make it so that _initializeLayout is only called after the Data in the WinJS namespace is initialized? I don't think this is something I can/should move into the data.js file into the Promise functions.

    (Also, my question has an answer on StackOverflow but I am unsure how to do the notifyWhenDataReady thing, or if there's a better way of doing it.)
    Wednesday, March 13, 2013 9:35 PM


All replies

  • Hi Rink,

    It looks like you already have an answer on StackOverflow since the replies are newer than this post.


    Jeff Sanders (MSFT)

    Thursday, March 14, 2013 11:03 AM
  • I have an answer on StackOverflow but I haven't been able to get anything working. Is there an example application where the data for the items are loaded from an asynchronous source?

    I've tried putting the entire data.js function into a non-anonymous (named) function that returns a Promise but that doesn't return anything in groupedItems.js, even though it is called on the Hub page. I've also tried passing an anonymous function (that calls _initializeLayout) as a callback function from groupedItems.js but that didn't work either.

    Thursday, March 14, 2013 2:11 PM
  • There are many ways you could do this.  You would need to pick the best for your situation.  Here is a great overview of the options:



    Jeff Sanders (MSFT)

    Monday, March 18, 2013 8:35 PM