如何在没有服务器端脚本的情况下在 jquerymobile html5 中编写可重用代码？

Question

有什么方法可以在 jquery mobile 中包含文件，使某些代码可重复使用，而不是到处编写冗余代码？

就像每个页面一样，我需要有一个主页按钮和一个后退按钮......有没有一种方法可以让我在文件中指定这些并将它们包含在每个页面中。我知道使用 javascript 执行此操作的困难方法...我可以在其中放置一个 div="header" 并包含一个稍后添加内容的脚本...

    <div id="bookHotels" data-role="page">

    <div data-role="header">

            -----   include the header file to to make it reusable ----

    </div><!-- /header -->

    <div data-role="content">   
    </div><!-- /content -->

    <div data-role="footer">
            <h4>footer text</h4>
    </div><!-- /footer -->
</div><!-- /page -->

任何帮助都会受到赞赏...

Answer 1

如果您使用的是 HTML (.html) 页面并且没有连接服务器端包含，那么您可以使用 JavaScript 模板（这并不太困难）。使用 JavaScript 进行模板化的另一个好处是，传输的线上数据较少，因此页面下载速度会更快。如果您发现自己一遍又一遍地重新编码相同的内容，那么使用模板是个好主意。

以下是在 jQuery Mobile 创建页面时向每个页面的标题添加内容的示例：

$('[data-role="page"]').live('pagecreate', function () {
    var $header = $(this).children('[data-role="header"]');
    $header.html('<div data-role="navbar"><ul><li><a href="#">Nav Item 1</a></li><li><a href="#">Nav Item 2</a></li><li><a href="#">Nav Item 3</a></li></ul></div>').trigger('create');
});

另一种选择是使用带有 seemless 属性的 标记（已添加） HTML5 规范中）。这是一个文档链接：http://www.w3schools.com/html5/tag_iframe.asp

Seemless：指定 iframe 应该看起来像是 iframe 的一部分。
包含文档

<div data-role="header">

        <iframe seemless="seemless" src="/path/to/header.html"></iframe>

</div><!-- /header -->

Answer 2

这是基于 Jasper 使用 js 模板原理的答案对我有用的解决方案。使用“加载”或类似技术的类似问题的所有其他答案都无法正常工作，因为 html 未正确增强以及其他问题。

$(document).on('pagebeforecreate', function () {
    // use document so that it triggers for all new pages
    // use pagebeforecreate so that JQM can enhance the html after it is inserted in the DOM
    // use 'on' instead of 'live' as 'live' is deprecated and does not work in jquery 1.9.1
    // $(this) is the current document here so have to use 'find' instead of 'children'
    $(this).find('[data-role="header"]').each(function () {
        // $(this) is now the header
        // if we have already inserted the html, we should not do it anymore
        if ($.trim($(this).html()) === "") $(this).html('<div data-role="navbar"><ul><li><a href="#">Nav Item 1</a></li><li><a href="#">Nav Item 2</a></li><li><a href="#">Nav Item 3</a></li></ul></div>');
    });
});