0
4

2 回答 2

0

Dynamic loading is a feature of several Javascript frameworks. AngularJS and Backbone.js for example. Maybe take a look at their approach to loading multiple views?

I have previously worked on an app that did this by adding an empty div for each view to the index.html, and then dynamically loading the Javascript for each view on demand. The Javascript for the views was responsible for rendering the HTML into the div for that view.

于 2012-09-18T15:18:50.817 回答
0

Without setting up a test case for you, if you really want to separate your pages to make your coding easier I would recommend to load the pages the standard way for jQuery Mobile i.e. 

$.mobile.changePage( "about/us.html", { transition: "slideup"} );

This way you aren't reinventing the wheel and it satisfies your request. The overhead will be negligible compared to your proposed solution in any case let alone taking into account you want the first page to render quickly rather than to be blocked by inserting many pages before any html is rendered in any case. Since they will be local on the device in any case Phonegap will be able to serve them very quickly.

One thing to remember when loading pages through jQuery Mobile is that it strips out anything in the target page outside of the 

data-role="page|dialog|popup"

tag and therefore to load custom page-specific javascript I would recommend you include the script tag directly below the 

data-role="page"

opening tag and set any page initialization to occur on "pageinit"

<div data-role="page" id="options" data-theme="a">
<script type="text/javascript">
    $(document).bind('pageinit', initializeOptions());
    function initializeOptions() {
        // do your page initialization here . . . 
    }
</script>
<!-- rest of page continues here . . . . -->

and then continue with the rest of your page as needed. That way it will be parsed when the page is loaded via the $.mobile.changePage method.

Hope that helps.

于 2012-09-18T20:20:09.887 回答