0

私は理解できない次の問題があります。リストビューを持つpageControlがあります。リストには項目テンプレートが設定されており、js スクリプトからリストをバインドしています。項目をクリックして別の pageControl に移動するときのイベント ハンドラーを追加しました。イベントが発生しますが、WinJS.Navigation.Navigate を実行すると、2 番目のページが読み込まれません。

ページ 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});
        }

    });
4

1 に答える 1

2

そのタイプのナビゲーションに使用する必要がある一般的な手法があります: http://msdn.microsoft.com/en-us/library/windows/apps/jj663505.aspx

  1. リンク ハンドラー関数を作成する
  2. 通常の href のようにナビゲートする代わりに、ナビゲーション フレームワークを使用するために、href のクリック イベントをインターセプトします。これを home.js に追加します

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

次に、ready イベントに次のコードを追加します。


 // 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>
于 2013-03-08T08:05:04.197 に答える