首先最基本的模式就是html和css对应的是view js对应的是controller。
首先是最基本的是html tag到js function的映射
<body>
<h1 class="headerClass">Hello, world!</h1>
<div class="mainContent">
<p>What's your name?</p>
<input id="nameInput" type="text" />
<button id="helloButton">Say "Hello"</button>
<div id="greetingOutput"></div>
</div>
</body>
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
// Retrieve the button and register our event handler.
var helloButton = document.getElementById("helloButton");
helloButton.addEventListener("click", buttonClickHandler, false);
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
function buttonClickHandler(eventInfo) {
var userName = document.getElementById("nameInput").value;
var greetingString = "Hello, " + userName + "!";
document.getElementById("greetingOutput").innerText = greetingString;
}
app.start();
})();
上面的js文件中,在
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
// Retrieve the button and register our event handler.
var helloButton = document.getElementById("helloButton");
helloButton.addEventListener("click", buttonClickHandler, false);
}
};
中注册响应函数.
在WinJS库中有很多控件给我们使用,但是HTML中并没有为这些控件提供专用的标签,所以要使用这些控件的时候,使用一个div来表示。
<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
</div>
要使用这些库中的控件,需要调用
args.setPromise(WinJS.UI.processAll());
WinJS库的控件的绑定需要在setPromise完成之后再进行,所以需要监视setPromise是否已经完成,可以使用then函数,在其中进行控件和js的绑定,如下
function ratingChanged(eventInfo) {
var ratingOutput = document.getElementById("ratingOutput");
ratingOutput.innerText = eventInfo.detail.tentativeRating;
}
args.setPromise(WinJS.UI.processAll().then(function completed() {
// Retrieve the div that hosts the Rating control.
var ratingControlDiv = document.getElementById("ratingControlDiv");
// Retrieve the actual Rating control.
var ratingControl = ratingControlDiv.winControl;
// Register the event handler.
ratingControl.addEventListener("change", ratingChanged, false);
}));
其他的一般控件 像button这些也可以放在then函数里面进行绑定,放在then之外也ok。
Win8应用生命周期
三种状态:停止 运行 挂起
现在要做的是,存储用户的输入,然后在下次程序启动或者从后台启动的时候,读取用户之前的输入.
function nameInputChanged(eventInfo) {
var nameInput = eventInfo.srcElement;
// Store the user's name for multiple sessions.
var appData = Windows.Storage.ApplicationData.current;
var roamingSettings = appData.roamingSettings;
roamingSettings.values["userName"] = nameInput.value;
}
上面便是将用户输入在输入框中的值保存。
在下一次程序加载的时候,取出保存的数据对对应的控件进行赋值
args.setPromise(WinJS.UI.processAll().then(function completed() {
// Retrieve the div that hosts the Rating control.
var ratingControlDiv = document.getElementById("ratingControlDiv");
// Retrieve the actual Rating control.
var ratingControl = ratingControlDiv.winControl;
// Register the event handler.
ratingControl.addEventListener("change", ratingChanged, false);
// Retrieve the button and register our event handler.
var helloButton = document.getElementById("helloButton");
helloButton.addEventListener("click", buttonClickHandler, false);
// Retrieve the input element and register our
// event handler.
var nameInput = document.getElementById("nameInput");
nameInput.addEventListener("change", nameInputChanged);
// Restore app data.
var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
// Restore the user name.
var userName =
Windows.Storage.ApplicationData.current.roamingSettings.values["userName"];
if (userName) {
nameInput.value = userName;
}
// Restore the rating.
var greetingRating = roamingSettings.values["greetingRating"];
if (greetingRating) {
ratingControl.userRating = greetingRating;
var ratingOutput = document.getElementById("ratingOutput");
ratingOutput.innerText = greetingRating;
}
}));
基本的html与js绑定 还有 控件基本使用 以及简单的数据存储 这是初探的总结,下一篇是写关于ListView template的,那个我还没消化好,边总结便继续消化。