在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 
}); 

希望這會有所幫助。