jQuery移动-将页面拆分成不同的文件

Question

我正在开发一个基于jQuery和jQuery手机的网络应用程序。我想显示不同的页面，但是由于相应的html标记可能变得相当大，所以我想将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>

我能做些什么来导入我的标记，上面写着<!-- import markup for page<x> -->？有什么办法做到这一点吗？

我试过使用<script>$("#page1").load("page1.html");</script>，但这会破坏整个页面！由于web应用程序应该被打包为智能手机的本地应用程序，所以以后不可以选择php。

Answer 1

感谢奥马尔上面的评论和他对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>

页面1.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>