初探WinJS库与HTML、JS的绑定及数据存储-CSDN博客

本文链接：https://blog.csdn.net/jkay_wong/article/details/8016110

本文介绍了如何在WinJS库中实现HTML与JS的绑定，包括基本的HTML与JS绑定、WinJS库控件的使用、数据存储以及应用生命周期管理。通过实例展示了如何在不同状态下保存和恢复用户输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先最基本的模式就是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的，那个我还没消化好，边总结便继续消化。