jQuery mobile - 将页面拆分为不同的文件答案

【问题标题】：jQuery mobile - Splitting up pages to different filesjQuery mobile - 将页面拆分为不同的文件
【发布时间】：2014-08-12 13:18:24
【问题描述】：

我正在开发一个基于 jQuery 和 jQuery mobile 的网络应用程序。我想显示不同的页面，但由于相应的 html-markup 可能会变得非常大，我想将 html 拆分为不同的文件，即：

<html>
    <head>
        <meta charset="utf-8" />            
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.3.min.css" />            
        <title>Hello World</title>
    </head>
    <body>
        <div data-role="page" id="page1">
          <!-- import markup for page1 here -->
        </div>

        <div data-role="page" id="page2">
          <!-- import markup for page2 here -->
        </div>

        <script src="js/libs/jquery-2.1.1.min.js"></script>
        <script src="js/libs/jquery.mobile-1.4.3.min.js"></script>
    </body>
</html>

我可以做些什么来导入我的标记？有什么方法可以实现吗？

我尝试使用<script>$("#page1").load("page1.html");</script>，但这会弄乱整个页面！由于网络应用程序应该打包为智能手机的本机应用程序，因此以后不能选择 php。

【问题讨论】：

如果加载外部页面，jQM 将仅获取首页 div。 .load() 不打算在 jQM 中使用，相反，如果您使用的是 jQM 1.4，请使用 .pagecontainer("load", "page.html")
pagecontainer("load", "page.html") 是否替换了整个<div data-role="page">-segment？还是必须在里面（如我上面的问题）？
不，它不会替换任何页面，它会将页面插入 DOM。 jqmtricks.wordpress.com/2014/05/23/…
我根本无法让它工作。您介意发布一个工作示例作为答案吗？我不太确定是否将 pagecontainer-method（在 div 内部或外部）等。
...我也无法通过谷歌找到一个很好的例子

标签： javascript jquery html jquery-mobile

【解决方案1】：

感谢上面 Omar 的 cmets 以及他对 this question 的回答，我能够想出一个可行的解决方案。

1.) 使用$.mobile.pageContainer.pagecontainer("load", "<externalResName>.html");向DOM添加外部页面

2.) 通过向文档添加监听器导航到新加载的页面（即$(document).on( "pagecontainerload", function( event, ui ) { //... } );）

3.) 通过将data-dom-cache="true" 添加到页面的div-tag 来确保外部资源保留在 DOM 中。

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />        
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.css" />
        <title>Hello jqm</title>
    </head>
    <body>  
      <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>

      <script> 
        $(document).ready(function(){   
          $(document).on( "pagecontainerload", function( event, ui ) {
            console.log('navigating to page1...');
            $.mobile.pageContainer.pagecontainer("change", "#page1");
            console.log('navigating done!');          
          } );

          console.log('loading pagecontainers...');
          $.mobile.pageContainer.pagecontainer("load", "page1.html");
          $.mobile.pageContainer.pagecontainer("load", "page2.html");
          console.log('pagecontainer-load done!');
        });
      </script>    
    </body>
</html>

page1.html

<div data-role="page" id="page1" data-dom-cache="true">
  <div data-role="header">
    <h1>Page 1</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page2" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go To Page 2</a>
  </div>
</div>

page2.html

<div data-role="page" id="page2" data-dom-cache="true">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>
  <div role="main" class="ui-content">
    <a href="#page1" data-rel="back" data-transition="slide" class="ui-btn ui-corner-all ui-btn-inline">Go Back To Page 1</a>
  </div>
</div>

【讨论】：