Group Title没有触发onClick事件的问题？ [英] Problem with Group Title not firing onClick event?

问题描述

Hey Guys，

在网格模板中，我有一个组标题，如下所示，onclick事件已绑定。但是，当我点击群组标题时，根本没有任何东西。看起来我什么都不缺。看着控制台，没有javascript错误。它应该点击
点击功能并导航到指定的页面。

HTML

< div class =" headerTemplate"数据双赢控制= QUOT; WinJS.Binding.Template"> 
< h2 class =" group-title" data-win-bind =" onclick：click; textContent：title"角色=&]连结">< / H2> 
< / div> 

Javascript

（function（）{
" use strict"; 
 
 var appView = Windows.UI.ViewManagement.ApplicationView; 
 var appViewState = Windows.UI。 ViewManagement.ApplicationViewState; 
 var nav = WinJS.Navigation; 
 var ui = WinJS.UI; 
 var utils = WinJS.Utilities; 
 
 
 ui .Pages.define（" /html/groupedItemsPage.html" ;, {
 
 
 groupDataSelector：function（item）{
 return {
 title：item.group .title，
点击：function（）{
 nav.navigate（" /html/groupDetailPage.html" ;, {group：item.group}）; 
} 
} 
}，
 
 //此函数在updateLayout中用于选择项目的组密钥。
 groupKeySelector：function（item）{
 return item .group.key; 
}，
 
 itemInvoked：function（eventObject）{
 if（appView.value === appViewState.snapped）{
 //如果页面被捕捉，用户调用了一个组。 
 var group = data.groups.getAt（eventObject.detail.itemIndex）; 
 nav.navigate（" /html/groupDetailPage.html" ;, {group：group}）; 
} else {
 //如果页面未被捕捉，则用户调用了一个项目。 
 var item = data.items.getAt（eventObject.detail.itemIndex）; 
 nav.navigate（item.pageTo，{item：item}）; 
} 
}，
 
 //每当用户导航到此页面时，都会调用此函数。 
 //使用应用程序的数据填充页面元素。 
 
 ready：function（element，options）{
 
 //document.getElementById('zoomedInListView').addEventListener("click" ;, this.handler,false）; 
 var listView = element.querySelector（&＃; zoomedInListView"）。winControl; 
 
 ui.setOptions（listView，{
 itemTemplate：element.querySelector（" .itemtemplate"），
 oniteminvoked：this.itemInvoked.bind（this）
 }）; 
 
 //让win-horizo​​ntal控件左右移动鼠标滚轮
 var listViewSrollControl = element.querySelector（"＃zoomedInListView"）; 
 listViewScrollControl.addEventListener（" mousewheel"，function（ev）{
 var scroller = listViewScrollControl.querySelector（" .win-horizo​​ntal"）; 
 if（scroller）{
 scroller.scrollLeft  -  = ev.wheelDelta; 
返回false; 
} 
}）; 
 
 / * 
 this.updateLayout（element，appView.value）; 
 * / 
}，
 
 //此函数更新页面布局以响应viewState更改。 
 updateLayout：function（element，viewState）{
 var listView = element.querySelector（" .zoomedInListView"）。winControl; 
 if（viewState === appViewState.snapped）{
 //如果页面被捕捉，则显示一个组列表。 
 ui.setOptions（listView，{
 itemDataSource：data.groups.dataSource，
 groupDataSource：null，
 layout：new ui.ListLayout（）
}）; 
} else {
 //如果页面未被捕捉，则显示分组项目的网格。 
 var groupDataSource = data.items.createGrouped（this.groupKeySelector，this.groupDataSelector）.groups; 
 
 ui.setOptions（listView，{
 itemDataSource：data.items.dataSource，
 groupDataSource：groupDataSource.dataSource，
 layout：new ui.GridLayout（{groupHeaderPosition ：" top"}）
}）; 
 
 ui.setOptions（listViewZoomed，{
 groupDataSource：data.items.groups.dataSource，
 layout：new ui.GridLayout（{groupHeaderPosition：" top"}）
}）; 
} 
}，
 
}）; 
 
 
}）（）; 
 

解决方案

Hi Solar，

您在匿名函数中隐藏了Click事件。 函数内定义的任何内容只能由该函数访问，而不是全局范围内的。 这是一个专门讨论该主题的部分  快速入门：
添加HTML控件和处理事件。 请参阅以下部分：
为什么你不应该在标记中设置事件处理程序。 阅读之后，您将理解为什么点击不起作用以及如何解决它！

-Jeff

Hey Guys,

In the Grid Template I have a group title as below with the onclick event binded. However when I click the group title, nothing fires at all. Doesn't look like I'm missing anything. Looked at the console and there are no javascript errors. It should fire the click function and navigate to the page specified.

HTML

<div class="headerTemplate" data-win-control="WinJS.Binding.Template">
        <h2 class="group-title" data-win-bind="onclick: click; textContent: title" role="link"></h2>
</div>

Javascript

(function () {
    "use strict";

    var appView = Windows.UI.ViewManagement.ApplicationView;
    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
    var nav = WinJS.Navigation;
    var ui = WinJS.UI;
    var utils = WinJS.Utilities;


    ui.Pages.define("/html/groupedItemsPage.html", {


        groupDataSelector: function (item) {
            return {
                title: item.group.title,
                click: function () {
                    nav.navigate("/html/groupDetailPage.html", { group: item.group });
                }
            } 
        },
        
        // This function is used in updateLayout to select an item's group key.
        groupKeySelector: function (item) {
            return item.group.key;
        },

        itemInvoked: function (eventObject) {
            if (appView.value === appViewState.snapped) {
                // If the page is snapped, the user invoked a group.
                var group = data.groups.getAt(eventObject.detail.itemIndex);
                nav.navigate("/html/groupDetailPage.html", { group: group });
            } else {
                // If the page is not snapped, the user invoked an item.
                var item = data.items.getAt(eventObject.detail.itemIndex);
                nav.navigate(item.pageTo, { item: item });
            }
        },

        // 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) {

            //document.getElementById('zoomedInListView').addEventListener("click", this.handler, false);
            var listView = element.querySelector("#zoomedInListView").winControl;

                ui.setOptions(listView, {
                    itemTemplate: element.querySelector(".itemtemplate"), 
                    oniteminvoked: this.itemInvoked.bind(this)
                });

               // make the win-horizontal control move left and right for mouse wheel
                var listViewScrollControl = element.querySelector("#zoomedInListView");
                listViewScrollControl.addEventListener("mousewheel", function (ev) {
                    var scroller = listViewScrollControl.querySelector(".win-horizontal");
                    if (scroller) {
                        scroller.scrollLeft -= ev.wheelDelta;
                        return false;
                    }
                });

            /*
            this.updateLayout(element, appView.value);
            */
        },

        // This function updates the page layout in response to viewState changes.
        updateLayout: function (element, viewState) {
            var listView = element.querySelector(".zoomedInListView").winControl;
            if (viewState === appViewState.snapped) {
                // If the page is snapped, display a list of groups.
                ui.setOptions(listView, {
                    itemDataSource: data.groups.dataSource,
                    groupDataSource: null,
                    layout: new ui.ListLayout()
                });
            } else {
                // If the page is not snapped, display a grid of grouped items.
                var groupDataSource = data.items.createGrouped(this.groupKeySelector, this.groupDataSelector).groups;

                ui.setOptions(listView, {
                    itemDataSource: data.items.dataSource,
                    groupDataSource: groupDataSource.dataSource,
                    layout: new ui.GridLayout({ groupHeaderPosition: "top" })
                });

                ui.setOptions(listViewZoomed, {
                    groupDataSource: data.items.groups.dataSource,
                    layout: new ui.GridLayout({ groupHeaderPosition: "top" })
                });
            }
        },

    });


})();

解决方案

Hi Solar,

You are hiding you click event in an anonymous function.  Any thing defined inside a function is only accessible to that function and not global in scope.  This has a section dedicated to the subject Quickstart: adding HTML controls and handling events.  See the section: Why you shouldn't set an event handler in markup.  After reading it you will understand why click does not work and how to fix it!

-Jeff

这篇关于Group Title没有触发onClick事件的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！