Question

我是JQuery Mobile的新手，需要建立一个相当大的移动网站（15页以上）。我的问题是我似乎无法弄清楚如何使用JQuery Mobile进行模板化。示例：例如，我不希望将所有JavaScript和CSS包含在每个页面中。我想要一个我所有页面都引用的模板，所以当我需要添加一个新的包含时，我只需将它添加到此模板中。

我来自ASP.NET背景，因此在ASP.NET中我只会创建一个母版页，但我无法在JQuery Mobile html页面中找到相应的内容。

提前谢谢。

编辑：我正在使用JQuery Mobile和PhoneGap / Cordova。

Answer 1

您可以使用RequireJS，Backbone和jQuery Mobile构建应用程序。 RequireJS是一个Javascript和模块加载器，Backbone为模型提供键值绑定，集合和视图。

Here是一个使用Phonegap开始开发应用程序的简单教程。

Answer 2

如果您正在使用Phonegap，您也可以将所有HTML放入一个文件中（您的链接将是id选择器 - href =“#contact”）。

然后，对于一些基本模板，我目前正在开发一个Phonegap / JQM应用程序，它通过在运行时将HTML页脚，页眉和侧边栏复制到每个页面上来重用页面之间的页眉，页脚和侧边栏HTML。

所以我的html看起来像这样：

<!-- reusable content - this is added to pages using JS -->

<div style="display:none">

    <div data-role="header" data-position="fixed" class="mainheader" data-id="mainheader">
        <h1>App Name/h1>
    </div><!-- /header -->

    <div data-role="footer" data-position="fixed" data-id="mainfooter">
        <div data-role="navbar" class="main-nav">
            <ul>
                <li><a href="#contact" data-parent="contact">Contact</a></li>
                ...
            </ul>
        </div>
    </div><!-- /navbar -->

    <div data-role="panel" class="sidebar" data-position="left">
        <!-- sidebar content -->
    </div>
</div>

<!-- /end of reusable content -->


<div id="cars" class="content-page" data-role="page">

    <!-- header gets added here -->

    <div data-role="content">
        <!-- page content would go here -->
    </div>

    <!-- footer and sidebar get added here -->

</div>

在我的JS中看起来像这样：

initializeReusableContent : function () {
    //make sure the panels and nav bar are on each page
    var header, footer, sidebar;

    header = $('.mainheader').remove();
    footer = $('.footer').remove();
    sidebar = $('.sidebar').remove();

    $(".content-page[data-role=page]").prepend(header).append(footer).append(sidebar);
},

然后，您可以使用类似https://github.com/janl/mustache.js的内容来制作内容模板。

如果你有更复杂的需求，模板语言可能会更好（Backbone，Angular等）。

使用JQuery Mobile进行模板化

2 个答案: