Templating with JQuery Mobile - jquery-mobile

Question

I am new to JQuery Mobile and need to build a fairly large mobile website with it (15+ pages). My problem is that I cannot seem to figure out how to template with JQuery Mobile. Example: I don't want to have all of my JavaScript and CSS includes in on EVERY page, for example. I would like a template that all of my pages reference, so when I need to add a new include, I just add it to this template.
I come from an ASP.NET background, so in ASP.NET I would just create a Master Page, but I can't figure an equivalent to this in JQuery Mobile html pages.
Thank you in advance.
edit: I am using JQuery Mobile with PhoneGap/Cordova.

Answer 1

You can build your application using RequireJS, Backbone and jQuery Mobile. RequireJS is a Javascript and module loader, and Backbone provides models with key-value bindings, collections and views.
Here is a simple tutorial to start developing your application using Phonegap.

Answer 2

If you're using Phonegap you may as well put all the HTML into a single file (your links would be id selectors - href="#contact").
Then for some basic templating I am currently working on a Phonegap/JQM app that reuses the header, footer and sidebar HTML between pages by copying a HTML footer, header and sidebar onto each page at runtime.
So my html looks something like this:
<!-- 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>Contact</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>
and in my JS looks like this:
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);
},
You could then use something like https://github.com/janl/mustache.js for your content templating.
If you have more complicated needs a templating language would probably better (Backbone, Angular etc).