从Pivot WinJS应用程序导航到独立控件页面

Question

我正在学习用JavaScript开发Windows应用商店应用，我遇到了以下问题。为了说清楚，我将解释重现问题的步骤：

1. 从VS 2013更新4创建新的Windows Phone动态应用程序（Pivot）。

2. 在page 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中创建了相应的控制页面文件，并将functions.js的引用添加到hub.html：<script src="/js/functions.js"></script>
   

现在，如果我执行应用程序并点击（+）按钮，它会正确导航到新页面，但是当我单击后退按钮时，应用程序将返回到数据透视页面，但所有数据透视图部分的格式都会中断在标题和文本之间添加一个大空间。

问题：

1. 我创建的appbar错了吗？有没有不同的标准方法呢？
2. 我导航错了吗？我应该使用其他不同的导航方法吗？

请帮忙。提前谢谢。

Answer 1

我怀疑您要导航到的页面上的CSS文件。导航到newPage时，将加载并应用CSS文件，然后在导航回原始页面后继续生效。

您只需在newPage.html上注释掉CSS文件的链接即可快速测试。导航到它时看起来很糟糕，但看看当你导航回调用页面看起来是否正常。如果是这样，那么样式表中的样式实际上太宽泛了。

要修复，最简单的方法是在所有newPage样式规则中使用页面名称作为命名空间元素。 WinJS框架将一个类添加到与页面同名的页面的顶级div中，因此您应该具有newPage类值。这意味着如果你改变样式规则，比如......

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

为...

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

...然后即使您导航回来，该规则也只会 。