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

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

    });
}

当您 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
});

希望这会有所帮助。