открыть URL на плитке с помощью JavaScript и HTML в приложении Win8 Metro - PullRequest
Новая
       13

открыть URL на плитке с помощью JavaScript и HTML в приложении Win8 Metro

1 голос
/ 26 марта 2012

В приложении Windows 8 Metro я хочу, чтобы ListViewItems / Tiles открывали ссылку после того, как на них щелкнули.Проблема в том, что при нажатии на них ничего не происходит.С addEventListener мне удалось вызвать элемент, но код не открывается, чтобы открыть ссылку.

Я храню свои тайлы в этом виде в файле default.js и хочу получить доступ к "ссылка "атрибут, они все имеют один.После этого есть 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 , но после нажатия ничего не происходит.

Может ли кто-нибудь помочь мне найти ошибку в моем коде?

1 Ответ

1 голос
/ 26 марта 2012

Возможно, вы хотите использовать событие onItemInvoked элементов ListView.

Скажем, myItemList - это идентификатор вашего элемента listView в DOM, а не идентификатор вашего шаблона 

<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 (или где бы вы ни связывали источник данных с вашим 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
});

Надеюсь, это поможет.

...