WinJS listview itemtemplate 导航到另一个页面答案

【问题标题】：WinJS listview itemtemplate navigate to another pageWinJS listview itemtemplate 导航到另一个页面
【发布时间】：2012-11-19 21:32:23
【问题描述】：

我有以下我无法弄清楚的问题。我有一个带有列表视图的 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});
        }

    });

【问题讨论】：

我明白了。我没有遵循正确的导航路径。由于我使用的是 PageControl，调用 page1 的页面使用的是`

标签： javascript windows-8 microsoft-metro winjs

【解决方案1】：

对于这种类型的导航应该使用一种通用技术，如下所示： http://msdn.microsoft.com/en-us/library/windows/apps/jj663505.aspx

创建链接处理函数
拦截 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 中有一个导航控件，否则此导航将无法按预期工作（因为导航控件挂钩到这些事件中）因此，请确保在您的 default.html 中有一个导航控件，例如：


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

【讨论】：