IPageControlMembers.init method

Initializes the control before the content of the control is set.

The processed method should be used for initialization after the content of the control is set.

Syntax

WinJS.UI.Pages.define("yourPage.html", {
    init: function (element, options) { /* your code here */ },
    // Other methods of PageControl
});

Parameters

  • element
    Type: DOMElement

    The DOM element that contains the content of the page.

  • options
    Type: Object

    The options passed to the constructor of the page.

Return value

Type: Promise**

A promise that is fulfilled when initialization is complete, if asynchronous processing is necessary. If not, returns nothing.

Examples

This example defines a PageControl that implements the init method.

<!-- advancedControl.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>advancedControl</title>

    <script src="/pages/advancedControl.js"></script>
</head>
<body>
    <div class="advancedControl fragment">
        <p>This content actually gets ignored, since the page control
            has overridden the load and render methods.
        </p>
    </div>
</body>
</html>
// advancedControl.js
(function () {
    "use strict";

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

        // The load method is called to actually retrieve the information from
        // the uri provided. The default implementation calls the low level
        // fragment loader to retrieve the content. By overriding this, you are
        // taking control of the loading process.
        //
        // For the purposes of this sample, instead of using any external content,
        // we'll just supply some raw HTML.
        //
        // Expected uses of this overload would be if you were generating your
        // content via some other mechanism like a JavaScript templating library.
        load: function (uri) {
            this._log = ["load called"];

            // As the API is defined, you are required to return a promise for the content.
            // This makes sense, as downloading content from the web or disk is an async
            // operation. Since in this case we're returning static data, we return
            // a promise for our static data via WinJS.Promise.as
            return WinJS.Promise.as({ preamble: "<p>", postamble: "</p>" });
        },

        // The next method called in the page lifecycle is init.
        // At this point, external assets are not available yet.
        // This method is a good place to kick off async processes
        // that may take a while.
        //
        // init can return a promise that completes when init is finished.
        // In this case we aren't doing any init work that we want to delay
        // so this method doesn't return anything.
        init: function (element, options) {
            // Fake out something async, we'll finish this off in the
            // processed callback.
            this._asyncActivity = WinJS.Promise.timeout(1500);

            // Add a log entry - these will get rendered in the render method.
            this._log.push("init called");
        },

        // The render function is called after load and init
        // completes. It receives the result from the load promise, and then is
        // responsible for actually parenting it into the DOM.
        //
        // In this case, we'll just set the content manually.
        render: function (element, options, loadResult) {
            this._log.push("render called");

            // Render our contents
            var content = [];
            this._log.forEach(function (item) {
                content.push(loadResult.preamble + item + loadResult.postamble);
            });

            WinJS.Utilities.setInnerHTML(element, content.join(""));
        },

        // The processed method is called after render is complete and
        // the system has called WinJS.UI.processAll on the content.
        // It's a useful place to wait for async activity to finish as
        // well.
        //
        // You can return a promise here, that will delay the rest of the
        // process until the promise completes.
        processed: function (element, options) {
            return this._asyncActivity.then(function () {
                var p = document.createElement("p");
                p.textContent = "processed called";
                element.appendChild(p);
            });
        },

        // The ready method is called after everything has finished being adding to the DOM
        // and controls are processed. In most cases, this is the only method you'll need
        // to implement.
        ready: function (element, options) {
            var p = document.createElement("p");
            p.textContent = "This control was created";
            element.appendChild(p);
            WinJS.log && WinJS.log("Control creation complete", "sample", "status");
        },

        // This function is NOT part of the creation lifecycle. However, it demonstrates that
        // you can define arbitrary additional functions on page controls. In this case, it's
        // used by the hosting code.
        unloadExample: function () {
            WinJS.log && WinJS.log("Control has been unloaded", "sample", "status");
        }
    });
})();

For the full code, see the HTML Page controls sample (Windows).

Requirements

Minimum WinJS version

WinJS 1.0

Namespace

WinJS.UI.Pages

See also

For developers

WinJS.UI.Pages.IPageControlMembers

Your first app - Part 3: PageControl objects and navigation

Navigating between pages

Quickstart: Using single-page navigation

Quickstart: Adding Page controls

Adding a Page control item template

HTML Page controls sample

Navigation and navigation history sample

For designers

Navigation patterns