Question

在Windows 8 Metro应用程序中，我希望ListViewItems / Tiles在单击它们后打开链接。问题是点击它们没有任何反应。使用 addEventListener 我设法调用该项目，但代码无法到达以打开链接。

我将这样的Tiles存储在default.js文件中，我希望访问“link”属性，它们都有一个。之后有EventListener和Event（ SelectItem ）：

var TileData = [
{ title: "Tile01", picture: "images/2.png", link: "http://www.gmail.com" },
{ title: "Tile02", picture: "images/1.png", link: "http://www.google.com" }
];

var dataList = new WinJS.Binding.List(TileData);

var publicMembers =
    {
        itemList: dataList
    };

WinJS.Namespace.define("DataExample", publicMembers);

WinJS.Application.onmainwindowactivated = function (e) {
    if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        WinJS.UI.processAll().then(function () {
            var TileList = document.getElementById('TileListView').winControl;
            TileList.dataSource = TileData;
            TileList.addEventListener('iteminvoked', SelectItem);
        });
    }
}

function SelectItem(e) {
    var selectedItem = TileData[e.detail.itemIndex];
    var selectedTileLink = document.getElementById('selectedTileLink');
    selectedTileLink.src = selectedItem.link;
    console.log('invoke ' + item.data.link);
    Windows.System.Launcher.launchUriAsync(new Windows.Foundation.Uri(selectedTileLink));
}

var app = WinJS.Application;

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        if (eventObject.detail.previousExecutionState !== Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
        } else {
        }
        WinJS.UI.processAll(); //It reaches this point
    }
};

app.oncheckpoint = function (eventObject) {
};


app.start();

ListView的模板在这里有它的选项，然后是ListView本身：

    <div id="TileItemTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 200px; height: 100px;">
            <img src="#" style="width: 200px; height: 100px;"
                 data-win-bind="alt: title; src: picture" />
        </div>
    </div>       

    <div id="TileListView" data-win-control="WinJS.UI.ListView"
        data-win-options="{ 
                            itemTemplate: select('#TileItemTemplate'),
                            itemDataSource : DataExample.itemList.dataSource,
                            layout:{type:WinJS.UI.GridLayout} }" >
    </div>

所以我的问题是代码没有打开我在SelectItem函数中指定的链接。我将它存储在 selectedTileLink 中，但点击后没有任何反应。

有人可以帮我找到代码中的失败吗？

Answer 1

您可能希望使用ListView项目的onItemInvoked事件。

说，myItemList是DOM中listView元素的id，而不是模板的id

<div id="myItemList" class="myItemList" data-win-control="WinJS.UI.ListView"
            data-win-options="{layout: {type: WinJS.UI.GridLayout, groupHeaderPosition: 'top'}}"
            aria-label="Collections">
</div>

以下是编写此事件处理程序的方法：

function myItemInvoked (e) {
    var ix = e.detail.itemIndex;
    var myItemList = document.getElementById('myItemList');
    if (!myItemList ) {
        return;
    }
    var myItemListControl = myItemList.winControl;
    var binding = myItemListControl .itemDataSource.createListBinding();
    binding.fromIndex(ix).then(function (item) {
        console.log('invoke ' + item.data.link);
        binding.release();
        // open a browser to navigate to the url
        Windows.System.Launcher.launchUriAsync(new Windows.Foundation.Uri(item.data.link))

    });
}

当你为listView updateLayout（或将数据源绑定到listview的任何地方）时，你可以像这样调用WinJS.UI.setOptions

WinJS.UI.setOptions(myItemListControl, {
      itemDataSource: myItemList.dataSource,
      itemTemplate: listItemTemplateRenderer, //your template element retrieved by getElementById
      groupDataSource: null,
      groupRenderer: null,
      selectionMode: 'single',
      oniteminvoked: itemInvoked
});

希望这有帮助。

在Win8 Metro App中使用javascript和html在磁贴上打开网址

1 个答案: