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
});
})();