Шаблон элемента списка WinJS перейти на другую страницу

У меня следующая проблема, которую я не могу понять. У меня есть pageControl со списком. в списке есть настройка шаблона элемента, и я привязываю список из сценария js. Я добавил обработчик событий, когда я щелкаю элемент, чтобы перейти к другому pageControl. Событие запускается, но когда я делаю WinJS.Navigation.Navigate, вторая страница не загружается.

Страница 1 HTML:

    <div class="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 100%; height: 100%;">
            <!-- Displays the "title" field. -->
            <h4 data-win-bind="innerText: name"></h4>

            <!-- Displays the "picture" field. -->
            <img src="#" style="width: 100%; height: 100%;" data-win-bind="alt: name; src: imageDefault" />
        </div>
    </div>


    <div class="collection fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to collection </span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">

            <div id="basicListView"
                data-win-control="WinJS.UI.ListView"
                data-win-options="{itemDataSource : Data.items.dataSource, 
                    itemTemplate: select('.mediumListIconTextTemplate'),
                    layout: {type: WinJS.UI.GridLayout, maxRows:1}}">
            </div>

        </section>
    </div>

страница 1 JS:

WinJS.UI.Pages.define("/pages/guitarCollection/guitarCollection.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            var list = document.getElementById("basicListView");
            list.itemDataSource = Data.items.dataSource;
            list.addEventListener("iteminvoked", this._itemInvoked);

            WinJS.UI.processAll();
        },

        unload: function () {
            // TODO: Respond to navigations away from this page.
        },

        updateLayout: function (element, viewState, lastViewState) {
            /// <param name="element" domElement="true" />

            // TODO: Respond to changes in viewState.
        },

        _itemInvoked: function (args) {
            var name = Data.items.getAt(args.detail.itemIndex).name;
            WinJS.Navigation.navigate("/pages/page2/page2.html", { name: name});
        }

    });

javascript microsoft-metro winjs windows-8
person Jonathan    schedule 19.11.2012    source источник
comment
Я понимаю это. Я не следовал правильному пути навигации. Поскольку я использую PageControl, страница, которая вызывает page1, использовала `‹a href=/pages/page1/page1.html›page1‹/a›». Это приводит к изменению навигации верхнего уровня, и эта страница 1 не имеет ссылки на страницу 2.‹/br› Вы должны быть осторожны при использовании одностраничной навигации и убедиться, что вы не меняете ссылку на страницу верхнего уровня. .‹br/› Я надеюсь, что это достаточно ясно.   -  person Jonathan    schedule 20.11.2012

Ответы (1)


arrow_upward
2
arrow_downward

Существует общий метод, который следует использовать для этого типа навигации, отмеченный на: http://msdn.microsoft.com/en-us/library/windows/apps/jj663505.aspx

  1. Создайте функцию обработчика ссылок
  2. Перехватите событие click для href, чтобы использовать навигационную структуру вместо навигации по обычному href. Добавьте это в свой home.js

 linkClickEventHandler: function (eventInfo) {
            eventInfo.preventDefault();
            var link = eventInfo.target;
            WinJS.Navigation.navigate(link.href);
        }

а затем добавьте следующий код в готовое событие:


 // This function is called whenever a user navigates to this page. It
 // populates the page elements with the app's data.
 ready: function (element, options) {
    WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);
    ..
    ..

Щелчки href будут перехвачены, и будет использоваться навигационная структура - это предполагает, что у вас есть элемент управления навигацией в вашем default.js, иначе эта навигация не будет работать должным образом (поскольку элемент управления навигацией подключается к этим событиям). Поэтому убедитесь, что по умолчанию .html у вас есть элемент управления навигацией, такой как:


<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}" ></div>
person Adam Tuliper - MSFT    schedule 08.03.2013