從Pivot WinJS應用程序導航到獨立控制頁面

Question

我剛學習使用JavaScript開發Windows應用商店應用程序，並且遇到以下問題。只是爲了說清楚，我會解釋的步驟來重現問題：

1. 從2013 VS更新4

2. 創建一個新的Windows Phone應用程序的動態（透視）在頁面section1Page.html我已添加應用程序欄：
   <div id="AppBarS1" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',icon:'add',section:'primary'}" data-win-res="{ winControl: {'tooltip': 'AppBarAddTooltip', 'label':'AppBarAddLabel'} }"></button> </div>
   這是爲了導航到一個頁面，其中包含要由用戶填充的字段並創建一個新對象。

3. 在section1Page.js我已經添加了appbar事件偵聽器：
   var appBar = document.getElementById("AppBarS1").winControl; appBar.getCommandById("cmdAdd").addEventListener("click", gotoNewPage, false);

4. 在/ JS文件夾中，我創建了一個包含此功能的functions.js腳本文件：
   function gotoNewPage() { WinJS.Navigation.navigate("/pages/standalone/newPage.html", null); }
   
5. 最後，我在此路徑/pages/standalone/newPage.html中創建了相應的控制頁面文件，並在hub.html中添加了對functions.js的引用：<script src="/js/functions.js"></script>
   

現在，如果我執行應用程序並點擊（+）按鈕，它將正確導航到新頁面，但是當我單擊後退按鈕時，應用程序將返回到數據透視頁面，但格式化會在所有透視部分中添加就像標題和文字之間的大空間。

問題：

1. 上午我創建appbar錯了嗎？有沒有不同的標準方式來做到這一點？
2. 我在做導航錯誤嗎？我應該使用樞軸應用中的另一種不同的導航方法嗎

請幫忙。提前致謝。

Answer 1

我懷疑您要導航到的頁面上的CSS文件。當您導航到新頁面時，將加載並應用CSS文件，然後即使在導航回到原始頁面後也會繼續生效。

您可以通過簡單地在newPage.html註釋掉CSS文件的鏈接來快速測試。當你導航到它時，它會看起來很糟糕，但看看你是否回到你的主叫頁面看起來很正常。如果是這樣，那麼樣式表中的樣式過於寬泛。

要解決這個問題，最簡單的方法是將頁面名稱用作所有newPage樣式規則中的命名空間元素。 WinJS框架將一個類添加到頁面頂層div中，頁面名稱與該頁面相同，因此您應該具有newPage類值。這意味着，如果你改變從類似樣式規則...

.some-rule .some-other-rule { property: value; }

到...

.newPage .some-rule .some-other-rule { property: value; }

...那麼該規則將只適用於即使在您導航回頁面。