从PageControl导航Winjs不会触发就绪事件

时间:2015-05-30 23:05:21

标签: javascript windows javascript-events microsoft-metro winjs

我正在学习在Visual Studio express 2013中构建Windows 8.1导航应用程序。

我在home.html中创建了一个按钮,并绑定了一个click事件来执行导航到一个名为htmlcontrols的pageControl元素(导航工作正常)。接下来我创建了一个名为otherpage的新pageControl,我添加了另一个按钮,但这次是在htmlcontrols中。我将另一个单击事件bindend到此按钮以从htmlcontrols导航到其他页面。

导航流程应为:
家(点击) - > htmlcontrols(点击) - > otherpage

第二个导航不起作用,我试图将调试器放在otherpage.js上的ready事件中,但它不会触发。

htmlcontrols.html:

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

    <link href="htmlcontrols.css" rel="stylesheet" />
    <script src="htmlcontrols.js"></script>
</head>
<body>
    <div class="htmlcontrols fragment">
        <header class="page-header" aria-label="Header content" role="banner">
            <button class="back-button" data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to htmlcontrols</span>
            </h1>
        </header>
        <section class="page-section" aria-label="Main content" role="main">

            <button id="newButton">Link to another page!</button>
        </section>
    </div>
</body>
</html>

htmlcontrols.js:

// For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
    "use strict";

    var nav = WinJS.Navigation;

    WinJS.UI.Pages.define("/pages/htmlcontrols.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) {
            // NEVER REACHES THIS POINT
            debugger;
            newButton.addEventListener("click", function (e) {

                nav.navigate("/pages/otherpage/otherpage.html");
            }, false);
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.

        },

        updateLayout: function (element) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in layout.
        }
    });
})();

2 个答案:

答案 0 :(得分:0)

发现它! 在htmlcontrols.js中,WinJS.UI.Pages.define()中的uri是错误的。

答案 1 :(得分:0)

我很高兴你找到了答案。更具体地说,项目中页面的.html文件的位置和WinJS.UI.Pages.define 中的相对URI必须匹配才能正确关联Page控件中的代码和HTML文件。否则会发生什么是HTML加载得很好,但是当WinJS查找已定义的页面控件时,它找不到匹配项,因此它不会触发任何这些事件。

请注意,如果您向Navigator.navigate提供了错误的URI并且无法找到该文件,则会引发异常。但是在Pages.define中使用错误的UI不会抛出因为WinJS假设页面可以在没有事件处理程序的情况下正常运行。