patternjavascriptMinor

Generating jQuery mobile "pages" dynamically

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

dynamicallygeneratingjquerymobilepages

Problem

I'm doing a college assignment with jQuery Mobile and JSON. Best practice with jQuery mobile is my main concern.

My html starts off with a main 'page' (data-role="page") inside a div with id="all-pages".

I use jQuery's .getJSON method to connect to a local JSON file called profiles.json. profiles.json contains an array called profiles and has multiple objects. I loop through this in my jQuery and generate a list item (which is inserted to the main 'page') for each profile. I also generate a 'page' (ie data-role="page") for each profile and link to it in the list item.

Before I make the getJSON request, I created variables that store html such as the 'header', that will be used on every page in order to try not to repeat my code. I still have a lot of jQuery code to generate the html. I am wondering if I can make it more efficient? I.e. Is there a best practice when it comes to generating pages dynamically in jQuery Mobile?

HTML:


    
        
        
        

        
            
            Home button
            The Random Network

            
            Panel button
        
        
            
                
                    
                        Welcome to the Random Network, where all kinds of random objects and things can socialize and meet new objects.          
                    
                    
                    
                        
                    
                
            
        
        
            Copyright Inanimate Objects

jQuery

```
$(document).ready(function(){
var header = '' +
'Home button' +
'Panel button' +
'The Random Network';
var content = '' +
'';

var intro_section = '' +
'' +
'' +
'';
var post_list = '';

//this is necessary so that we can access our panel on all pages.
$("body>[data-role='panel']")

Solution

I suggest using a JS template engine like http://handlebarsjs.com/ if this is appropriate for your project. In your HTML file you can define several templates wrapped in a tag:


  
    {{title}}
    
      {{body}}

in you JS you define all the {{vars}}, optional compile the template (performance, especially for mobile), then let jQ append it:

var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);
$('#myDiv').append(html);

But once you do, the template vars are fix you cannot change them. You cannot nest these templates. handlebarsjs is not the only, but the most common template engine

Code Snippets

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);
$('#myDiv').append(html);

Context

StackExchange Code Review Q#127936, answer score: 3

Revisions (0)

No revisions yet.