windows 8 - Complete function in WinJS.UI.Pages.IPageControlMembers method -

how can complete function in init before call ready method. code:

winjs.namespace.define("data", {     source: "" });  var page = winjs.ui.pages.define("/html/page.html", {     init: function (element, options) {         createdatasoucre();     },      ready: function () {         document.getelementbyid("result").innerhtml = data.source;     } });  function createdatasoucre() {     //blah blah (calculate thousands of calculations)     data.source = result; } 

when run, page doesn't render "result" tag. try use promises doesn't work me:

init: function (element, options) {         return new winjs.promise.as(createdatasoucre()); } 

thanks time.

i tried code in simple test project follows:

(function () {     "use strict";      winjs.namespace.define("data", {         source: ""     });      function createdatasource() {                 data.source = "<ul><li>item 1</li><li>item2</li><li>item3</li></ul>";     }      winjs.ui.pages.define("/pages/home/home.html", {         init: function (element, options) {             createdatasource();         },          ready: function (element, options) {             document.getelementbyid("result").innerhtml = data.source;         }     }); })(); 

everything works expected, bullet list appearing on page.

however, believe you're asking how make createdatasource function asynchronous in itself, can "thousands of calculations" off ui thread , produce promise init function can return. way, page loading process wait upon completion of calculations.

what's needed here use new winjs.promise rather winjs.promise.as. as method wraps value in promise value send completed handler attach, doesn't create async function automatically. that's have do.

let me provide example appendix of free ebook, programming windows store apps html, css, , javascript, second edition, chapter 3 , appendix go details promises. here's function long series of calculations using setimmediate break work on ui thread. (you use web workers put work on thread, or use winrt component--but i'll leave book talk subjects, in chapter 18 in section "implementing asynchronous methods").

function calculateintegersum(max, step) {     //the winjs.promise constructor's argument function receives     //dispatchers completed, error, , progress cases.     return new winjs.promise(function (completedispatch, errordispatch, progressdispatch) {         var sum = 0;         function iterate(args) {             (var = args.start; < args.end; i++) {                 sum += i;             };             if (i >= max) {                 //complete--dispatch results completed handlers                 data.source = "sum <em>" + sum + "</em>";                 completedispatch(sum);             } else {                 //dispatch intermediate results progress handlers                 progressdispatch(sum);                                     setimmediate(iterate, { start: args.end, end: math.min(args.end + step, max) });             }         }         setimmediate(iterate, { start: 0, end: math.min(step, max) });     }); } 

you can similar own process. key here when process complete, have call completedispatch function that's given initializer. in code above i'm putting result data.source.

with such method, createdatasource function can this:

function createdatasource() {     return calculateintegersum(100000, 2); } 

because calculateintegersum returns promise , implemented async, createdatasource return promise can return init:

init: function (element, options) {     return createdatasource(); }, 

i tried out in project , works fine, page loading waiting upon calculations complete.