導航在WinJS中按預期工作

我有一個應用程序欄圖標並單擊事件 - 我添加了具有下面的代碼的函數：

function homePage() { 

    WinJS.Navigation.navigate("/home/homePage.html"); 

}

現在我有兩個文件 - homePage.html這裏面的/ home /和js文件相同。

在id NextPage的html上有一個簡單的按鈕。

而在homePage.js文件，我有：

function() { 
    "use strict"; 

    WinJS.UI.Pages.define("/home/homePage.html", { 
     ready: function (element, options) { 
      var button = document.getElementById("NextPage"); 
      button.addEventListener("click", GoToNextPage); 
     } 
    }); 
    function GoToNextPage() { 
     WinJS.Navigation.navigate("/default.html"); 
    } 

})();

但是當我點擊應用程序欄圖標 - 什麼也沒有發生:(

所以我打算實現的目標是，當有人點擊在default.html上的一個appbar圖標 - 用戶切換到homePage.html（然後當我點擊homePage按鈕 - 它回去） - 但不是最初的頁面傳輸正在發生。但我不能只是摺疊手，等待什麼很快就會發生。我一直在爲此工作一個小時 - 閱讀視頻和樣本，但它根本不工作。

將不勝感激幫助 - 我無法弄清楚發生了什麼問題。謝謝！

來源

2012-09-15 Rahul Mathur

如果你進入在VS的.navigate電話，怎麼了？如果你一直關注它，它會在任何地方失敗嗎？您是否在您正在調用的HTML文檔中包含homePage.js？ –

嘿。是的，homepage.js位於homePage.html的頭部src中。導航並沒有真正發生 - 我沒有得到任何錯誤:( –

homePage.html清單中的開始頁面？您的JS文件需要包含在應用程序的開始頁面（或者更具體地說，頁面* from *你正在啓動導航 –

WinJS.Navigation命名空間提供狀態和歷史管理，但它實際上並不執行導航本身。要從一個頁面移動到另一個頁面，需要爲WinJS.Navigation名稱空間中的某個事件定義處理程序函數 - 這可以讓您以對您的應用程序有意義的方式調用WinJS.Navigation.navigate方法作出響應。

作爲演示，下面是一個homePage.html文件，其中包含一個NavBar，其中包含將成爲導航觸發器的命令。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>NavProject</title> 
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" /> 
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script> 
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script> 
    <link href="/css/default.css" rel="stylesheet" /> 
    <script src="/js/homePage.js"></script> 
</head> 
<body> 
    <div id="contentTarget"> 
      <h1>Select a page from the NavBar</h1> 
    </div> 
    <div id="navbar" data-win-control="WinJS.UI.AppBar" 
     data-win-options="{placement:'top'}"> 

     <button data-win-control="WinJS.UI.AppBarCommand" 
      data-win-options="{id:'NextPage', label:'Next Page', 
       icon:'\u0031', section:'selection'}"> 
     </button> 
    </div> 
</body> 
</html>

隨着的NavBar，我已經定義了div元件，其id是contentTarget。這是我內容中當用戶單擊NavBar命令時將加載新文件的地方。

CLARIFICATION：您要替換的所有內容都需要進入contentTarget元素。否則，您將看到新舊內容的混合顯示。

這裏是JavaScript文件，其中電線它（這是homePage.js文件，我在HTML文件中添加腳本元素以上）：

(function() { 
    "use strict"; 

    WinJS.Navigation.addEventListener("navigating", function (e) { 
     var elem = document.getElementById("contentTarget"); 

     WinJS.UI.Animation.exitPage(elem.children).then(function() { 
      WinJS.Utilities.empty(elem); 
      WinJS.UI.Pages.render(e.detail.location, elem) 
       .then(function() { 
        return WinJS.UI.Animation.enterPage(elem.children) 
       }); 
     }); 
    }); 

    var app = WinJS.Application; 
    var activation = Windows.ApplicationModel.Activation; 

    app.onactivated = function (args) { 
     args.setPromise(WinJS.UI.processAll()); 

     navbar.addEventListener("click", function (e) { 
      if (e.target.id == "NextPage") { 
       WinJS.Navigation.navigate("/nextPage.html"); 
      } 
     }, true); 

    }; 
    app.start(); 
})();

通知我如何添加一個處理函數WinJS.Navigation.navigating事件。通過調用WinJS.Navigation.navigate觸發此事件，導航目標的詳細信息包含在事件對象的detail.location屬性中。

在這個例子中，我清除了我的目標元素中的任何內容，並將其替換爲目標文件的內容，併爲從一個到另一個的過渡設置動畫。

您只需爲事件定義一個處理程序。這意味着，如果我有nextPage.html元素，這將導致導航，我只需要調用WinJS.Navigation.navigate，而不需要創建一個新的事件處理程序，如下所示：

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <script> 
      WinJS.UI.Pages.define("/nextPage.html", { 
       ready: function() { 
        back.addEventListener("click", function() { 
         WinJS.Navigation.navigate("/homePage.html"); 
        }); 
       } 
      }); 
     </script> 
    </head> 
    <body> 
     This is next page. 
     <button id="back">Back</button> 
    </body> 
</html>

來源

2012-09-16 07:29:31

嘿亞當..一個小混亂：你提到的JS文件是HomePage.js對嗎？不需要在我正在導航的文件的js部分中編程任何東西？ –

沒錯 - 您試圖訪問的文件中沒有需要的東西（我在答案中添加了一個句子以使其更清晰） –

好的。所以它部分地工作大聲笑，它顯示了當前default.html的頂部的新頁面（半透明）和動畫左和一種消失..如何解決這個問題？ –

導航在WinJS中按預期工作

回答

相關問題