使用jQuery Mobile和PhoneGap加载动态JavaScript / HTML

Question

I'm developing a mobile app using Dreamweaver CS6 (with PhoneGap ), jQuery Mobile and JavaScript that will collect user-inputted form data, transform the data into a JSON object and transmit it to a python web service. The purpose of the mobile app is to let users create a food order which is then sent to the restaurant. I wanted to inquire with the SO community on what would be an elegant way of handling the logic of creating the order. Currently, the logic is defined by the JavaScript in the HTML page, example below (truncated for brevity):

JavaScript:

    var burgerType; //defines burger type eg.cheeseburger,hamburger
    var burgerQueue = new Array(); //holds completed burgers

    //detects if cheeseburger
    $("#cheeseburger").click(function() {
        burgerType="cheeseburger";
    });

    //detects if hamburger
    $("#hamburger").click(function() {
        burgerType="hamburger";
    });

HTML:

  <div data-role="content">
    <ul data-role="listview" data-theme="e" id="burgers">
      <li id="cheeseburger"><a href="#toppings">Cheeseburger</a></li>
      <li id="hamburger"><a href="#toppings">Hamburger</a></li>
    </ul>
  </div>

Screenshot: Clicking on a burger takes you to a screen that let's you choose the toppings , didn't include it because don't think it's relevant.

I realize this is probably a very poor way of handing the logic because if the restaurant menu changes I would have to modify the app, republish it to their respective markets (Play,iTunes, etc), and have users update it. The last thing I'd wanna do is frustrate users by having to constantly update the app due to bugs or changes. I know I could partially separate the logic out of the HTML by using an external javascript library residing in the application directory, but that doesn't help with the constant update issue. I would've made the app link directly to a mobile app page on a web server (so the changes I make are immediately seen without updating the app) but I read on another SO post the Apple gatekeepers don't publish apps that are basically just a webpage wrapped in an app. I'm looking at the django web framework and thinking it may be what I want, but not sure which is why I'm inquiring with the coding gurus here at SO to get ideas on what I should be doing.

To recap: trying to dynamically generate a user-interface and coding logic using jQuery/JavaScript without frustrating users with constant updates. (Kinda like how jQuery let's you hotlink to their CDN-hosted libraries). I realize this might be confusing, I'll clarify any questions asked.

Answer 1

对于这种情况，最好使用像jQuery mobile这样的AJAX导航框架，该框架可以在不重新加载任何内容的情况下在页面之间移动，而只有一个真正的html文档。

Answer 2

You can bind a single event to multiple elements:

$("#burgers").on("click", "a" function() {
    var li = $(this).parent();
    burgerType = li.attr("id");

    $.mobile.changePage("#toppings");
    return false;
});

Then you just need to generate the list elements from data, probably based on an ajax call. For that sort of thing I usually make the ajax call in the background on app startup, and have the previous result of that call saved so that connecting for updates doesn't slow down app startup.