jQuery Mobile软件的体系结构

我正在写一个软件，它具有诸如日历和客户搜索等视图。例如，主页面包含这些小节的链接。当用户导航到日历页面时，今天的事件通过AJAX查询从后端加载。当从日历视图中打开个别事件时，其详细信息会再次从后端动态加载。jQuery Mobile软件的体系结构

第一个原型被写成一个大HTML文件，所有JavaScript代码直接嵌入。现在我已经开始将其重构为更易于管理的系统。

问题是我想将每个视图分隔为自己的页面，这个页面可以独立使用，但也可以作为jQuery Mobile站点的一部分，具有平滑的AJAX转换。根据我的观察，通过jQuery Mobile中的AJAX链接加载页面意味着从目标页面只将标有data-role =“page”属性的元素注入到源页面的HTML中。所有脚本标签都被剥离。

我该如何区分视图，但仍然保持流畅的AJAX转换？

来源

2011-06-15 Ville Salonen

该链接的答案是我已经使用了解决方案。在您的初始索引页面中包含一个JavaScript文件ref。在这里你有下面的代码，当新页面被加载时被调用。

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

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

}

通过使用一个JavaScript文件的每一页，你可以保持一个干净的项目结构，但他们必须都在初始索引页面引用。您可以用pagebeforecreate或pagecreate替换pageshow，具体取决于您希望脚本运行的时间。

另一种方法是将文件动态像这样的负荷：如果您使用的是JavaScript来改变DOM

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

但不会是非常有用的，因为需要之前做页面显示。

来源

2011-06-16 08:59:17 Jivings

现场演示：http://jsfiddle.net/Jaybles/MawSB/

链接答：AJAX Request Help for next/previous page

如果此帮助+1以上

来源

2011-06-15 12:53:14

我不认为这回答了这个问题。 OP希望知道如何在页面标签中包含新页面JavaScript（当页面更改时不会加载）。 – Jivings 2011-06-16 08:49:26

@Jivings - 这包括在JQM中不应该发生（也不能以任何常规方式完成），所以很高兴知道如何完成它。 – naugtur 2011-06-16 10:55:47

@naugtur - 够公平的。 – Jivings 2011-06-16 11:36:54

jQuery Mobile软件的体系结构

回答

相关问题