win8:添加Page Controls的几种方法

lang110

　　Check：http://msdn.microsoft.com/zh-cn/library/windows/apps/hh770117.aspx
　　首先先添加一个Page Control ，命名为page。系统生成3个文件。将其显示的方法有一下几种：
　　1、使用 WinJS.UI.Pages.render 功能。
　　在default.html中添加




　　对应在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




　　default.js



                var constructedHost = document.querySelector(".renderingPageControls-createdProgrammatically");
new Controls_PageControls.Page(constructedHost, null);
　　3、实例化 HTML 控件，就像是 JavaScript 控件的 Windows 库（事实如此）。你必须为此公开暴露 PageControl 对象的构造函数以进行处理。




　　4、使用 HtmlControl 呈现页面。



   
　　
　　注意：在公开PageControl之后要在default.html中添加引用。
　　
　　贴部分代码：
　　default.html



   



　　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) {
///
// TODO: Respond to changes in viewState.
        }
});
WinJS.Namespace.define("Controls_PageControls", {
Page: ControlConstructor
});
})();