如何在WinJS ListView中手动触发MinVoked

Question

我有一个WinJS ListView，它的项目使用模板函数创建（itemTem板选项指向一个函数）。返回的项目内部有一个div，该div具有win交互类，因此可以接受输入。具体来说，该div需要能够滚动以显示更多适合ListView项的内容。

滚动与应用于div的win交互类完美配合。我试图解决的问题是允许正常的单击（鼠标向下，鼠标向上）仍然触发ListView上的onitem调用事件，同时仍然允许滚动ListView项中的div。

我想这很容易：我会用wininteractive类将一个click事件监听器绑定到div，然后简单地将click事件传递到ListView项上的另一个元素，确保最终触发voked事件。

我已将click listener绑定到win interactivediv，并按预期触发它。但是，我不知道如何在ListView项的另一部分上触发click/item调用。我曾尝试使用事件（currentTarget）的属性来获取父元素或同级元素并触发它们上的事件，但我根本不知道如何触发像事件这样的元素上的事件。当前目标。

tl；dr：如何允许在ListView项目中滚动，同时仍然允许正常单击触发项目调用？

Answer 1

总的来说，ListView只是通过将点击传递给您为控件注册的任何ItemCalled处理程序来处理点击。这意味着您应该能够绕过整个链，直接使用适当的项索引调用处理程序，这很容易获得。

在项目的单击处理程序中，如果您手边有ListView对象，那么list.current项目将是具有焦点的项目（显然也是单击的项目），其索引属性将是通常传递给itemInvoked的内容。然后，您可以直接调用itemInvoked处理程序，构建适当的事件对象，或者您可以将处理程序的代码分离到另一个方法中，然后调用该方法。

作为一个基本示例，从一个网格应用程序模板项目开始，我在pages/groupedItems/groupedItems中将wininteractive添加到item title元素（可以由任何其他元素（如滚动区域）中）。html:

<h4 class="item-title win-interactive" data-win-bind="textContent: title"></h4>

在pages/groupedItems/groupedItems的ready方法中。js，我将ListView的对象附加到页面控件以供以后使用：

var listElement = element.querySelector(".groupeditemslist");
var list = listElement.winControl;
this._list = list;

然后将单击侦听器连接到项目标题元素，如下所示。我这样做是因为项目是通过模板创建的；如果您有一个项呈现函数，那么您可以直接在该代码段中添加侦听器。

var that = this;

list.addEventListener("loadingstatechanged", function () {
    if (list.loadingState == "complete") {
        var interactives = element.getElementsByClassName("item-title");

        for (var i = 0; i < interactives.length; i++) {
            interactives[i].addEventListener("click", that._itemClick.bind(that));
        }
    }
});

我的页面控件中_itemClick的实现如下所示：

_itemClick: function (e) {
    var item = this._list.currentItem;

    //Can also get the index this way
    var index = this._list.indexOfElement(e.currentTarget);

    this._itemInvoked({"detail" : { itemIndex : item.index} })
},

_itemInvoked是模板附带的同一个处理程序。

请注意，使用win交互，对于执行小向下/向上动画的项目，您不会获得通常的pointerDown/pointerUp行为，因此如果您认为重要，您可能希望也包含这些行为（使用WinJS. UI. Animation.pointer向下/pointerUp方法来执行效果）。

最后，有可能从_itemClick内的e.currentTarget元素上链，并在适当的父级上模拟单击事件，但我认为这比通过执行所有这些操作的WinJS代码进行跟踪更麻烦。把你自己的项目称为调用要直接得多。