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軟件的體系結構

回答

相關問題