jQuery Mobile软件的体系结构

问题描述

| 我正在编写一个具有日历和客户搜索等视图的软件。例如，主页包含指向这些小节的链接。当用户导航到日历页面时，今天的事件通过AJAX查询从后端加载。当从日历视图中打开单个事件时，其详细信息将再次从后端动态加载。 第一个原型是作为一个大HTML文件编写的，其中直接嵌入了所有JavaScript代码。现在，我已经开始将其重构为一个更易于管理的系统。 问题是我想将每个视图分离为自己的页面，该页面可以独立使用，也可以作为具有平滑AJAX过渡的jQuery Mobile网站的一部分。根据我的观察，通过jQuery Mobile中的AJAX链接加载页面意味着从目标页面仅将标记有data-role = \“ page \”属性的元素注入到源页面的HTML中。所有脚本标签都被剥离。 如何分隔视图，但仍保持平滑的AJAX过渡？     

解决方法

        这是我使用过的解决方案。在初始索引页面中包含一个JavaScript文件引用。在此，您具有以下代码，这些代码在加载新页面时被调用。

$(\'div[data-role=\"page\"]#page-id\').live(\'pageshow\',function(e){

    // put the code you want to execute when the page is loaded here

}

通过为每个页面使用一个JavaScript文件，您可以保持干净的项目结构，但是必须在初始索引页面中全部引用它们。您可以将

pageshow

替换为

pagebeforecreate

或

pagecreate

，具体取决于您希望脚本何时运行。 另一种方法是像这样动态加载文件：

var newjs = document.createElement(\'script\');
newjs.setAttribute(\"type\",\"text/javascript\");
newjs.setAttribute(\"src\",\"page-two.js\");

但是，如果您使用JavaScript来更改DOM，那将不是很有用，因为这需要在显示页面之前完成。     ,        相关：下一页/上一页的AJAX请求帮助 现场演示：http：//jsfiddle.net/Jaybles/MawSB/ 链接到答案：AJAX请求帮助下一页/上一页 如果此帮助为上述链接的答案+1