WinJS listview itemtemplate导航到另一页

Question

我有以下问题我搞不清楚。我有一个带有ListView的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});
        }

    });

Answer 1

在http://msdn.microsoft.com/en-us/library/windows/apps/jj663505.aspx上有一种常见的导航技术

1. 创建链接处理程序函数
2. 截取href的click事件以使用导航框架，而不是像普通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中有一个导航控件，否则这个导航将无法按预期工作（因为navigate控件挂钩到这些事件中），所以请确保在default.html中有一个导航控件，例如：

<div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}" ></div>