在Win8 Metro应用程序中使用javascript和html的tile上打开url地址应用程序

Question

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

我将这样的Tiles存储在default.js文件中，我想访问“link”属性，它们都有一个。之后存在事件侦听和事件（的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 
}); 

希望这会有所帮助。