0

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

我来自 ASP.NET 背景，所以在 ASP.NET 中我只会创建一个母版页，但我无法在 JQuery Mobile html 页面中找到与之等效的内容。

先感谢您。

编辑：我将 JQuery Mobile 与 PhoneGap/Cordova 一起使用。

4

2 回答 2

0

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

这是开始使用 Phonegap 开发应用程序的简单教程。

于 2013-08-01T13:54:37.020 回答
0

如果您使用的是 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 等）。

于 2013-09-03T13:15:15.997 回答