动态地将页面添加到jQuery移动Web应用程序

我有一个需要12个jQuery Mobile页面的MVC4 Web应用程序。

1. 欢迎
2. 登录

然后是其他许多人。

我想在用户请求的时候添加一个页面，

1. 将页面动态添加到项目的最佳方法是什么？

2. 包含页面脚本（动态添加的页面）的适当站点在哪里？

3. 如果它包含在Html.ActionLink()究竟是什么意思是data-ajax =“false”？

这时我的应用程序几乎占了90％，但是我在引用某些页面时遇到了严重的问题，有时候视图中包含的所有页面都没有渲染或者没有运行脚本。

Answer 1

我认为您在组织JQuery Mobile页面时有以下选择：

（a）一个包含所有页面的HTML文件（div = class =“page”）

这是最简单的方法，并且保证可以正常工作，但是对于大型项目，文件可能会变得太大

（b）一个链接到子HTML文件的主HTML文件

从UI的角度来看，JQM在加载子页面时默认使用“AJAX模式”，这使得转换像选项（a）一样流畅。 这样做的缺点是子页面没有完全加载，即没有执行任何包含或脚本。 在加载时，JQM使用class =“page”解析第一个div的子页面，提取div并将其添加到当前DOM。 请注意，子页面不能包含多个“页面”，因为只会加载第一个页面。

要正确执行选项（b），您可以：

1. 包括所有CSS，JS并在主页面中运行所有init脚本

2. 在链接上指定“data-ajax = false”或“rel = external”。 这会强制JQM完全重新加载链接/子页面，但是使用此方法会丢失流体转换。

Answer 2

我过去使用的一种方法是将一个主页加载到浏览器中。

其余的“页面”只是HTML块，它们被加载到主页面中的“content”div中。 显然会有一个初始的“页面”，它是初始加载时主页默认加载的第一个HTML块，但是剩余的“页面”是根据需要加载的（例如，当用户登录时。单击链接，等等。）。

我在主页面中使用了JQuery .Load（）来删除每个“页面”的HTML块，并根据需要将它们加载到“content”div中。

我发现这很方便，因为所有脚本和样式都可以驻留在每个HTML块中（就像完整的独立页面一样）和JQuery .Load（）将负责脚本的所有运行和样式的应用。

在MVC方面，只有主页面的视图包含完整的HTML页面元素，并且结构化为“页面”内容的“容器”。 其余视图将仅包含每个“页面”的相关内容，并且被构造为适当地适合“容器”。