1

我基本上是 JavaScript 和 WinJs 的新手。按照本教程学习它。

我的 default.html 如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorld</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- HelloWorld references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<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" />
        <label for="ratingControlDiv">
            Rate this greeting:
        </label>
        <div id="ratingControlDiv" data-win-control="WinJS.UI.Rating" />
        <div id="ratingOutput" />
    </div>
</body>
</html>

我的default.js如下

// 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().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);

            }));

        }
    };

    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;

    }

    function ratingChanged(eventInfo) {

        var ratingOutput = document.getElementById("ratingOutput");
        ratingOutput.innerText = eventInfo.detail.tentativeRating;
    }

    app.start();
})();

我在 ratingChanged 中将 ratingOutput 设为 null。任何想法为什么？

4

1 回答 1

3

正如其他评论所指出的，请务必使用关闭，因为自关闭的 div 不重视 HTML5。在 Jeffrey 提供的链接中，有来自验证器的引用，我相信：“用于非空 HTML 元素的自闭合语法 (/>)。忽略斜杠并将其视为开始标记。”

问题不在于 ratingOutput div，而是它之前用于 Rating 控件的那个。我将您的代码放入一个新项目并重现了您的结果，并且可以在 Visual Studio 的 DOM Explorer 中看到 ratingOutput div 根本不存在于 DOM 中。

为什么会这样？它是上面引用加上 WinJS.UI.processAll 在 ratingControlDiv 中创建 WinJS 控件的方式的组合。WinJS 实例化进程（在 processAll 中）有效地将 ratingOutput 视为 ratingControlDiv 的子项，并将其替换为真实的控件内容。

换句话说，您看到的行为与您编写此标记完全一样：

<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating">
    <div id="ratingOutput"></div>
</div>

除非 WinJS 控件明确说明它以某种方式与子元素一起工作（如语义缩放控件），否则无法保证子元素将被保留。

因此 ratingOutput 被评级控件实例化从 DOM 中删除。

使用适当的关闭标签，可以解决问题：

<div id="ratingControlDiv" data-win-control="WinJS.UI.Rating"></div>
<div id="ratingOutput"></div>

很好的问题——我将把这个注释添加到我现在正在编写的第二版中。

Kraig（作者，使用 HTML、CSS 和 JavaScript 编程 Windows 8 应用程序，来自 Microsoft Press 的免费电子书）

于 2013-04-25T16:13:05.617 回答