使用jQuery构建Windows 8 Metro应用程序

Question

我刚刚开始使用HTML/JS进行Windows 8开发.我花了几个月的时间沉浸在针对车载单元和电视的应用程序的jQuery开发中.

跳到这里,我认为过渡很简单.我的网站的设计和结构大部分都是我想到的,并希望能够遵循我以前的工作中使用的一些做法.

也就是说,我想基本上创建一个单页面应用程序.主default.html文件将包含顶部导航/标题和另一个div.另一个div将用于加载所有其他页面,项目中的所有单独的HTML文件.

所有全局函数和主要功能都将驻留在javascript文件application.js中.然后,任何特定于页面的JavaScript都将驻留在每个HTML文件的顶部.

我很快意识到这是一个问题.使用jQuery.load()加载我的页面会导致我的应用程序出现安全错误.

JavaScript运行时错误:无法添加动态内容.脚本试图注入可能不安全的动态内容或先前动态修改的元素.例如,使用innerHTML属性添加脚本或格式错误的HTML将生成此异常.使用toStaticHTML方法过滤动态内容,或使用createElement等方法显式创建元素和属性.

我真的希望避免学习一堆特定于微软的东西.我觉得很棒,他们提供了很多工具,什么不是,也许我只是没有充分利用它们,但是对我来说,一切都感觉太僵硬,我想要做的或已经完成的事情用jQuery.我是一个喜欢完全了解正在发生的事情并完全控制它的人.

同时查看模板和示例项目,我真的不喜欢所有重复的代码.例如,每个HTML文件声明所有相同的引用.我想写一下像我的标题栏一样的引用和部分,而不必在我的项目中复制/粘贴代码.

有没有办法以我希望的方式做事,并创建单页应用程序？他们有自己的替代jQuery的.load()吗？

任何指导我正确方向的帮助将非常感谢!

编辑2012年8月14日:

我尝试使用此问题的修复: 在Windows 8 Metro JavaScript App中使用jQuery会导致安全性错误

这消除了安全警告,我可以使用jQuery.load()加载HTML.但是,看看DOM资源管理器,我的HTML被剥夺了我的脚本.

我也尝试在MSApp.execUnsafeLocalFunction()中包装我的.load()调用,但是我的文件仍然被剥离了所有脚本.是什么赋予了？

Answer 1

我通过简单地更改导致错误的jQuery行来修复.

jQuery-1.8.0,第5566行:

    append: function () {
        return this.domManip(arguments, true, function (elem) {
            if (this.nodeType === 1 || this.nodeType === 11) {
                self.appendChild(elem);  // problem line
            }
        });
    },

变成:

    append: function () {
        return this.domManip(arguments, true, function (elem) {
            if (this.nodeType === 1 || this.nodeType === 11) {
                var self = this;
                MSApp.execUnsafeLocalFunction(function () {
                    self.appendChild(elem);
                });
            }
        });
    },

Answer 2

有一种“正式”的方式来完成您所寻求的事情。
WinJS.Navigation 是为了支持“单页应用程序”而提供的。例如，default.html将包含一个标记，表示动态加载的页面内容的去向：

<div id="contenthost" 
    data-win-control="Application.PageControlNavigator" 
    data-win-options="{home: '/pages/home/home.html'}">
</div>

在上面的例子中，实际加载的内容页面位于/pages/home/home.html

在事件处理程序中，您只需执行以下操作load或导航到另一个页面：

WinJS.Navigation.nav("/pages/other/page.html");

确实，它不是 jQuery，但效果很好:)