CODEWITHSUNDEEP
cordovastructure
Juan Cortés
Juan Cortés

Reputation: 21122

Correct PhoneGap - Cordova multipage approach

Are there any significant reasons to use one page with all the html in it and div elements with the data-role='page' attribute set instead of multiple page files in PhoneGap?

I seem to be having some issues with code on a secondary page (ie linked from index.html) that in turn works correctly when made the primary loaded file.

A reason why I'm asking this is the apparent inability of importing reusable code easily, like a common header with all the includes and js that are common to all pages therefore not being able to adhere to the DRY principle.

A big page with all the includes of all the sections of the page seems a bit overkill, so I'm assuming something in-between like importing the extra js files when transitioning from one page to the other would be appropriate or maybe since they're all loaded from the local file-system the loading times would be fast enough to do one "big-load"

Upvotes: 1

Views: 1879

Answers (3)

redDragonzz
redDragonzz

Reputation: 1571

What you can do perhaps is that have an index.html file with all the page barebone HTML like this:

<!-- Start of second page -->
<div data-role="page" id="second">
</div><!-- /page -->
<!-- Start of third page -->
<div data-role="page" id="third">
</div><!-- /page -->

So whenever the client loads a page with a hash url #third then it will be transferred to the third page. Perhaps then you can trigger off an AJAX request which builds the page once it is loaded in the DOM.

Upvotes: 2

refugene
refugene

Reputation: 383

You need to save the main content of each page in a separate html file. Then you can use jQuery Mobile ajax calls to pull in each of these template files. Check out http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html

Upvotes: 0

Stan
Stan

Reputation: 4239

Good reason to use one html file for all pages is ability to use some template engine for example.
You can create and initialize all pages at start.

Upvotes: 0

Related Questions