Question

我在开发Windows Phone应用程序时正在使用WinJS。我遇到的错误是下面的代码（home.js）中的“itemInvoked”事件侦听器未触发。这几乎就像代码不存在一样。为了解决这个问题，我尝试了一个单独的函数代码块和一个单独的行来设置eventlistevener（例如，function handler(event) {...} lw.addEventListener("itemInvoked", handler);。我甚至尝试过内联，例如：lw.addEventListener("itemInvoked", function(event) {...});。但是，它没有任何区别。以下是我的代码：

basketball.html

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

    <!-- WinJS references -->
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
    <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

    <script src="/pages/basketball/basketball.js"></script>

</head>
<body>
    <div class="headertemplate" data-win-control="WinJS.Binding.Template">
        <span class="group-header win-type-x-large win-type-interactive" role="link" tabindex="-1">
            <span class="group-title win-type-ellipsis" data-win-bind="textContent: title"></span>
            <span class="group-chevron"></span>
        </span>
    </div>

    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <div class="item">
            <img id="image" class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
            <div id="info" class="item-overlay">
                <h4 id="title" class="item-title shadow" data-win-bind="textContent: title"></h4>
                <h6 id="subtitle" class="item-subtitle win-type-ellipsis shadow" data-win-bind="textContent: subtitle"></h6>
            </div>
        </div>
    </div>

    <div class="fragment groupeditemspage">
        <header aria-label="Header content" role="banner">
            <button id="backButton" data-win-control="WinJS.UI.BackButton"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Basketball Today</span>
            </h1>
        </header>
        <section class="content" aria-label="Main content" role="main" id="content">
            <div id="item" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{
                    layout: {type: WinJS.UI.GridLayout, groupHeaderPosition: 'top'},
                    selectionMode: 'none',
                    currentItem: {type: WinJS.UI.ObjectType.item, index: 0, hasFocus: true},
                    groupDataSource: Data.groups.dataSource,
                    groupHeaderTemplate: select('.headertemplate'),
                    itemDataSource: Data.items.dataSource,
                    itemTemplate: select('.itemtemplate'),
                    ongroupheaderinvoked: select('.pagecontrol').winControl.groupHeaderInvoked,
                    oniteminvoked: handler,
                    layout: {type: WinJS.UI.GridLayout, orientation: WinJS.UI.Orientation.vertical}
                }">
            </div>
        </section>
    </div>
</body>
</html>

basketball.js

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/basketball/basketball.html", {
        ready: function (element, options) {
            var lw = document.getElementById("item").winControl;
            lw.addEventListener("iteminvoked", function (eventInfo) {
                console.log("hi");
                eventInfo.detail.itemPromise.done(function itemInvoked(item) {
                    WinJS.Navigation.navigate("/pages/article/article.html", { newsItem: item.data });
                });
            });
        },
        unload: function () { },
        updateLayout: function (element) { }
    });
})();

值得注意的是addEventListener的整个代码块似乎不起作用。我尝试在页面导航之前添加console.log("hi");以查看它是否只是不起作用的页面导航代码，但事实证明控制台也没有记录“hi”，这意味着整个事件监听器无法正常工作。

感谢您的帮助。我对WinJS并不完全熟悉，因此我犯了一个错误（这可能是一个小小的，愚蠢的错误）。

Answer 1

在对WinJS.UI.Pages.define的调用中，第一个参数是页面ID，它必须与您导航到的HTML文件的名称相匹配。在您的代码中，您有/pages/basketball/basketball.html，它与home.html不匹配。

因此，home.html加载得很好，但是页面控件的现成方法并没有执行，因为您已经为basketball.html定义了它。因此，请确保第一个字符串arg与Pages.define匹配它所存在的HTML文件，即＆＃34; /pages/home/home.html"或者这样。

WinJS＆＃34; ItemInvoked＆＃34;事件没有解雇

1 个答案: