在jQuery Mobile的多页面模板 [英] Multi page template in jquery mobile

问题描述

我创建一个使用多页面模板我的网页，我读到只启动页面（例如的Index.aspx）加载时依然停留在大教堂中的每个页面。但现在我在其他页面（例如child.aspx），这是网页parent.aspx的孩子，我可以看到parent.aspx页面的DOM元素。
面包屑情况如下：首页 - >父--->的孩子，也许我应该只看到指数的DOM含量不父。这让我觉得奇怪，为什么网页是这样的，我怎么能处理it.Thanks

I create my pages using multi page template, I read that only start page(e.g index.aspx) still remain in Dom in each pages when loading. but now in my other page(e.g child.aspx) which is a child of page parent.aspx, I can see dom element of parent.aspx page. the breadcrumb is as follow: Index--->parent--->child, maybe I should see only the index dom content not parent. this make me wonder why the page is like this and how I can handle it.Thanks

我只想重新加载每一次放映的每一页，我的意思是彻底清除DOM和从一开始加载内容。就像当你按下Ctrl + F5和加载网页没有缓存。这是可能的JQM？

I just want to reload every page on each showing, I mean clearing the DOM completely and loading content from the beginning. Like when you push ctrl+f5 and load page without cache. Is this possible in JQM?

Index.aspx的：

    <form id="form1" runat="server" dir="rtl">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode = "Conditional">
            <ContentTemplate>
        <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
        <uc2:MblMyMessageBox ID="MblMyMessageBoxInfo" runat="server" ShowCloseButton="true" /> 
    <div data-role="page" id="home"> 
        <div data-role="header">
            <h1>header</h1>
        </div>
        <div data-role="content">   
            <ul data-role="listview" data-inset="true" data-filter="false">
                <li data-icon="false"><a href="AccountStatus.aspx">AccountStatus</a></li>
                <li data-icon="false"><a href="ConfirmPayment.aspx">ConfirmPayment</a></li>
            </ul>   
        </div>
    </div>
            </ContentTemplate>
    </asp:UpdatePanel>
</form>

AccountStatus.aspx：

 <div data-role="page" id="accountStatus">
    <div data-role="header">
        <h1>Header</h1>
    </div><!-- /header -->
    <div data-role="content">   
        <ul data-role="listview" data-inset="true" data-filter="false">
            <li data-icon="false"><a href="BalancePage.aspx" data-prefetch="true">balance</a></li>
            <li data-icon="false"><a href="InvoicePage.aspx">invoice</a></li>
        </ul>           
    </div><!-- /content -->
    <div data-role="footer">
        <p><a href="Index.aspx">back</a></p>
    </div><!-- /footer -->
 </div><!-- /page -->   

从accountStatus页面的DOM元素删除索引的内容是我的目的。

removing content of index from accountStatus page dom element is my purpose.

推荐答案

这是用户导航到将被添加到DOM的所有页面。请参见文档。然而JQM也有机制以保持DOM从获取到大，拖慢浏览器。它可能会或可能不会从DOM中删除旧元素。
我会建议你不要在DOM元素信任得到自动删除。如果你真的要删除您从导航离开该页面，您可以绑定例如以下内容：

All pages that the user has navigated to will be added to the dom. See the documentation. However jQM also has a mechanism to keep the DOM from getting to big and slowing down the browser. It may or may not remove old elements from the DOM. I would advice you not to trust on DOM elements getting removed automatically. If you really want to remove the page you are navigating away from, you can bind for example the following:

$(document).one("pageshow",function(){
     $(document).one("pagehide",function(){
          $("#pageId").remove();
     });
});

pageid是给该ID的＆LT; D​​IV数据角色=页面ID =PAGEID方式＆gt;

编辑更新后的问题：
要跟踪链接时重新加载整个页面：

Edit for the updated question: To reload the whole page when following links:

这是指向其他域或有相对=外部链接，
  数据阿贾克斯=假或目标属性就不会被加载使用Ajax。
  相反，这些链接会引起整个页面刷新，没有动画
  过渡。

Links that point to other domains or that have rel="external", data-ajax="false" or target attributes will not be loaded with Ajax. Instead, these links will cause a full page refresh with no animated transition.

来源： jQuery Mobile的文档

或者你可以用以下全局变量更改：

$.mobile.ajaxEnabled = false;

这篇关于在jQuery Mobile的多页面模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！