Metro javascript How to: 如何获取嵌入每个Item的控件的事件-优快云博客

本文介绍如何在ListView中为每个项动态添加Button控件，并通过点击事件获取相关项的信息。通过自定义itemTemplate并绑定click事件，可以实现在点击Button时显示对应项的详细内容。

如图

listview 中每一个选项都有一个button控件。

我们要点击这个button控件并通过这个控件获取这个item的相关信息，在listview中应该如何实现？

方法：

动态加载template，这样我们就可以在动态添加button控件时加入button click事件了，然后在此时可以获取到所有动态创建的其他控件的信息。

代码如下：

首先在HTML页面中我们申明一个动态创建的itemTemplate：MyJSItemTemplate

<div data-win-control="SdkSample.ScenarioOutput">
        <div id="listView" 
            data-win-control="WinJS.UI.ListView" 
            data-win-options="{ 
                itemDataSource: myData.dataSource, 
                itemTemplate: MyJSItemTemplate, 
                selectionMode: 'none', 
                tapBehavior: 'none', 
                swipeBehavior: 'none', 
                
            }"
        ></div>
    </div>

然后是后台代码中，我们需要声明这样一个方法，返回其所需的类型：

function MyJSItemTemplate(itemPromise) {
    return itemPromise.then(function (currentItem) {

        // Build ListView Item Container div
        var result = document.createElement("div");
        result.className = "regularListIconTextItem";
        result.style.overflow = "hidden";

        // Build icon div and insert into ListView Item
        var image = document.createElement("img");
        image.className = "regularListIconTextItem-Image";
        image.src = currentItem.data.picture;
        result.appendChild(image);

        // Build content body
        var body = document.createElement("div");
        body.className = "regularListIconTextItem-Detail";
        //body.style.overflow = "hidden";

        // Display title
        var title = document.createElement("h4");
        title.innerText = currentItem.data.title;
        body.appendChild(title);

        // Display text
        var fulltext = document.createElement("h6");
        fulltext.innerText = currentItem.data.text;
        body.appendChild(fulltext);

        //Display button1
        var Button = document.createElement("button");
        Button.innerText = "button";
        //WinJS.Utilities.addClass(Button, "win-interactive");
        Button.addEventListener("click", function (eventObject) {

            var content1 = document.getElementById("content1");
            content1.innerHTML = "title=" + title.innerText + "fulltext" + fulltext.innerText;
        });


        body.appendChild(Button);
        result.appendChild(body);
     
        return result;
    });
}

这样就可以直接获取到它的click事件了。

但是如果所添加的控件是可滑动的那种，例如一个滑动条控件，我们就需要给他添加一个class="win-interactive" 属性了，

因为你用手滑动的时候，系统会以为是滑动整个listview 而不是里面的控件，这是加上这个class就可以防止listview滑动了。

转载于:https://www.cnblogs.com/he-yuan/archive/2012/08/01/2618872.html