从 Pivot WinJS 应用程序导航到独立控制页面答案

【问题标题】：Navigate to standalone control pages from Pivot WinJS application从 Pivot WinJS 应用程序导航到独立控制页面
【发布时间】：2015-10-01 17:04:06
【问题描述】：

我刚刚学习用 JavaScript 开发 Windows 应用商店应用程序，我正面临以下问题。为了清楚起见，我将解释重现问题的步骤：

从 VS 2013 更新 4 创建一个新的 windows phone 动态应用程序 (Pivot)。
在 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>
这旨在导航到包含用户填写字段的页面并创建一个新对象。
在 section1Page.js 中我添加了 appbar 事件监听器：
var appBar = document.getElementById("AppBarS1").winControl; appBar.getCommandById("cmdAdd").addEventListener("click", gotoNewPage, false);
在 /js 文件夹中，我创建了一个包含此函数的 functions.js 脚本文件：
function gotoNewPage() { WinJS.Navigation.navigate("/pages/standalone/newPage.html", null); }
最后我在/pages/standalone/newPage.html这个路径下创建了对应的控制页面文件，并在hub.html中添加了functions.js的引用：<script src="/js/functions.js"></script>

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

问题：

请帮忙。提前致谢。

【问题讨论】：

【解决方案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; }

...那么该规则将仅应用于该页面，即使您返回页面也是如此。

【讨论】：