Question

我有以下问题我无法弄清楚。我有一个带有列表视图的pageControl。该列表有一个项目模板设置，我从js脚本绑定列表。当我单击该项目以导航到另一个pageControl时，我添加了一个事件处理程序。该事件启动但当我执行WinJS.Navigation.Navigate时，第二页未加载。

Page 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

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


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

WinJS listview itemtemplate导航到另一个页面

1 个答案: