動態地將頁面添加到jQuery移動Web應用程序

Question

我有一個需要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頁面元素，並且被構造成用作“頁面”內容的“容器”。 其余視圖將僅包含每個“頁面”的相關內容，並且被構造為適當地適合“容器”。