Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap

Question

I\'m diving into writing a mobile app with jQuery Mobile/PhoneGap. I\'m using this sample template to start from, which uses HTML/JS to create the pages. Rather than have al

Answer 1

If you really want to do this properly, you need to look into a js framework like Thorax or JavascriptMVC.

In a JMVC app, you could do this from any view:

    <%== $.View('./header.ejs') %>
    

    ...
    
    <%== $.View('./footer.ejs') %>

jQuery Mobile is really only useful for progressive markup enhancement and styling for mobile devices. For the actual MVC part you need an MVC framework.

The examples for jQuery Mobile are also mostly geared for building mobile web sites which since they fetch pages from a server assume your code reuse is happening server side. A phonegap app is a whole nother beast since you will be generating these pages on the fly or from local static files. This is were the MVC framework comes in as you would be building your pages using controllers, views, view helpers, and model classes. You tie all that into jQuery mobile by listening to the pagebeforeshow event as shown on the jQm documentation page on scripting pages