win8:添加Page Controls的几种方法

Check：http://msdn.microsoft.com/zh-cn/library/windows/apps/hh770117.aspx

首先先添加一个Page Control ，命名为page。系统生成3个文件。将其显示的方法有一下几种：

1、使用 WinJS.UI.Pages.render 功能。

在default.html中添加

<div class="renderingPageControls-renderedControl"></div>

对应在default.js中添加

var renderHost = document.querySelector(".renderingPageControls-renderedControl");
WinJS.UI.Pages.render("/js/page/page.html", renderHost, null).done();

2、在page.js中公开PageControl

default.html

<div class="renderingPageControls-createdProgrammatically"></div>

default.js

                var constructedHost = document.querySelector(".renderingPageControls-createdProgrammatically");
                new Controls_PageControls.Page(constructedHost, null);

3、实例化 HTML 控件，就像是 JavaScript 控件的 Windows 库（事实如此）。你必须为此公开暴露 PageControl 对象的构造函数以进行处理。

<div data-win-control ="Controls_PageControls.Page"></div>

4、使用 HtmlControl 呈现页面。

    <div class="renderingPageControls-htmlControl" data-win-control="WinJS.UI.HtmlControl"
    data-win-options="{uri: '/js/page/page.html'}"></div>

 

注意：在公开PageControl之后要在default.html中添加引用。

 

贴部分代码：

default.html

    <div class="renderingPageControls-renderedControl"></div>
    <div class="renderingPageControls-createdProgrammatically"></div>
    <div data-win-control ="Controls_PageControls.Page"></div>
    <div class="renderingPageControls-htmlControl" data-win-control="WinJS.UI.HtmlControl"
    data-win-options="{uri: '/js/page/page.html'}"></div>

default.js

            args.setPromise(WinJS.UI.processAll().then(function () {
                //way one
                // Render the page control via a call to WinJS.UI.Pages.render. This lets
                // you render a page control by referencing it via a url.
                var renderHost = document.querySelector(".renderingPageControls-renderedControl");
                WinJS.UI.Pages.render("/js/page/page.html", renderHost, null).done();

                //way two
                // Render the page control by creating the control.
                var constructedHost = document.querySelector(".renderingPageControls-createdProgrammatically");
                new Controls_PageControls.Page(constructedHost, null);
            }));

page.js

page.js

(function () {
    "use strict";

    var ControlConstructor = WinJS.UI.Pages.define("/js/page/page.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) {
            // TODO: Initialize the page here.
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in viewState.
        }
    });

    WinJS.Namespace.define("Controls_PageControls", {
        Page: ControlConstructor
    });
})();