从 Pivot WinJS 应用程序导航到独立控制页面
Navigate to standalone control pages from Pivot WinJS application
我刚开始学习在 JavaScript 中开发 Windows 商店应用程序，我面临以下问题。为了清楚起见，我将解释重现问题的步骤：
从 VS 2013 更新 4 创建一个新的 windows phone 动态应用程序 (Pivot)。
在页面 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>
这是为了导航到一个页面，其中包含要由用户填写的字段并创建一个新的 object.
在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>
现在，如果我执行应用程序并点击 (+) 按钮，它会正确导航到新页面，但是当我单击后退按钮时，应用程序 returns 会转到主页面，但格式在所有枢轴部分都被破坏，在标题和文本之间添加了一个大 space。
问题：
- 我创建的应用栏错了吗？有不同的标准方法吗？
- 我是不是导航错了？我应该使用与 pivot 应用程序不同的另一种导航方法吗？
请帮忙。提前致谢。
我怀疑您正在导航到的页面上有 CSS 文件。当您导航到新页面时，CSS 文件将被加载并应用，然后即使您导航回原始页面也会继续生效。
您可以通过简单地将 link 注释掉到 newPage.html 上的 CSS 文件来快速测试它。当您导航到它时它看起来很糟糕，但是当您导航回来时看看您的调用页面是否看起来正常。如果是这样，那么您的样式表中的某些样式实际上过于宽泛。
要修复，最简单的方法是在所有 newPage 样式规则中使用页面名称作为命名空间元素。 WinJS 框架在与页面同名的页面的顶级 div 中添加了一个 class，因此您应该有一个 newPage class 值。这意味着如果您更改样式规则，例如...
.some-rule .some-other-rule {
property: value;
}
到...
.newPage .some-rule .some-other-rule {
property: value;
}
...那么该规则将仅适用于该页面，即使您向后导航也是如此。
我刚开始学习在 JavaScript 中开发 Windows 商店应用程序，我面临以下问题。为了清楚起见，我将解释重现问题的步骤：
从 VS 2013 更新 4 创建一个新的 windows phone 动态应用程序 (Pivot)。
在页面 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>
这是为了导航到一个页面，其中包含要由用户填写的字段并创建一个新的 object.在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>
现在，如果我执行应用程序并点击 (+) 按钮，它会正确导航到新页面，但是当我单击后退按钮时，应用程序 returns 会转到主页面，但格式在所有枢轴部分都被破坏，在标题和文本之间添加了一个大 space。
问题：
- 我创建的应用栏错了吗？有不同的标准方法吗？
- 我是不是导航错了？我应该使用与 pivot 应用程序不同的另一种导航方法吗？
请帮忙。提前致谢。
我怀疑您正在导航到的页面上有 CSS 文件。当您导航到新页面时，CSS 文件将被加载并应用，然后即使您导航回原始页面也会继续生效。
您可以通过简单地将 link 注释掉到 newPage.html 上的 CSS 文件来快速测试它。当您导航到它时它看起来很糟糕，但是当您导航回来时看看您的调用页面是否看起来正常。如果是这样，那么您的样式表中的某些样式实际上过于宽泛。
要修复，最简单的方法是在所有 newPage 样式规则中使用页面名称作为命名空间元素。 WinJS 框架在与页面同名的页面的顶级 div 中添加了一个 class，因此您应该有一个 newPage class 值。这意味着如果您更改样式规则，例如...
.some-rule .some-other-rule {
property: value;
}
到...
.newPage .some-rule .some-other-rule {
property: value;
}
...那么该规则将仅适用于该页面，即使您向后导航也是如此。