从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; }

...那么该规则将只适用于即使在您导航回页面。