title: How to populate a jQuery Mobile ListView with JSON data?
body: <p>I'm developing a webapp here using HTML and jQuery Mobile (JQM), so I'm pretty new at this.
  What I'm trying to do here is to populate a JQM listview with a list of names.
  Each of this names will link to a new page with personal data being displayed (Full name, address, date of birth, etc).</p>
  
  <p>Currently, because of my lack of knowledge, I manually create a new .html file for EACH individual person (e.g. johnDoe.html for a fictional character Mr. John Doe). I then physically link the list elements to this html file via the  function.</p>
  
  <p>Problem is now I have 100 over individuals to populate that list view. I think that there's an easier way to do this rather than manually creating 100+ html files for all these individual persons right?</p>
  
  <p>I heard of this JSON thing that might do the trick, but coming from a background of ZERO computing knowledge, I don't really understand how it works. Will someone please shed some light on how can I do this?</p>
  
  <p>Thanks a lot!</p>
  
  <p>EDIT:
  I'm using Dreamweaver CS5.5 to do the coding. For this webapp that I'm tasked to develop, I was given a "template" or sorts that uses JQM and Backbone.js. As such, somehow the "multi-page" structure for a single HTML file doesn't seem to work. From what I see in the template, every HTML file has a corresponding JS file that has code that looks like this:</p>
  
  <pre><code>define(['jquery',
          'underscore',
          'backbone',
          'helper',
          'views/phr/list',
          'text!templates/vpr2.html'
      ],
      function ($,
          _,
          Backbone,
          Helper,
          phrListView,
          tmpVpr2) {
          var view = Backbone.View.extend({
              transition: 'fade',
              reverse: true,
              initialize: function () {
                  this.phrlistview = new phrListView();
              },
              render: function () {
  
                  $(this.el).append(_.template(tmpVpr2, {}));
  
                  console.log("Rendering subelements...");
                  Helper.assign(this, {
                      '#phrListView': this.phrlistview
                  });
  
                  return this.el;
              }
  
          });
  
          return view;
      });
  </code></pre>
  
  <p>For the HTML pages, they all begin with a <code>&lt;div data-role=header&gt;</code> tag, then a <code>&lt;div data-role=content&gt;</code>, before ending with a <code>&lt;div data-role=footer&gt;</code>, all with their respective content within the opening and closing tags.</p>
  
  <p>For my listview in question, the JQM code for the listview will be within the <code>&lt;div data-role=content&gt;</code> part of the HTML file. How can I populate this listview with JSON data then?</p>
  
  <p>(Apologies if I sound extremely noob at this, because I really am >.&lt; Really appreciate the help!)</p>