0

我正在使用Dreamweaver CS6(with PhoneGap)jQuery Mobile和 JavaScript 开发一个移动应用程序，该应用程序将收集用户输入的表单数据，将数据转换为 JSON 对象并将其传输到 python Web 服务。移动应用程序的目的是让用户创建一个食品订单，然后将其发送到餐厅。我想向 SO 社区询问什么是处理创建订单逻辑的优雅方式。目前，该逻辑由 HTML 页面中的 JavaScript 定义，示例如下（为简洁起见）：

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>

截图：点击一个汉堡会带你进入一个让你选择浇头的屏幕，没有包括它，因为不认为它是相关的。

我意识到这可能是处理逻辑的一种非常糟糕的方式，因为如果餐厅菜单发生变化，我将不得不修改应用程序，将其重新发布到各自的市场（Play、iTunes 等），并让用户更新它。我想做的最后一件事是因为错误或更改而不得不不断更新应用程序，从而让用户感到沮丧。我知道我可以通过使用驻留在应用程序目录中的外部 javascript 库将逻辑部分从 HTML 中分离出来，但这对不断更新的问题没有帮助。我会将应用程序链接直接链接到网络服务器上的移动应用程序页面（因此我所做的更改无需更新应用程序即可立即看到）但我在另一篇 SO 帖子中读到 Apple 网守不发布基本上是只是一个包裹在应用程序中的网页。我'

回顾一下：尝试使用 jQuery/JavaScript 动态生成用户界面和编码逻辑，而不会因不断更新而让用户感到沮丧。（有点像 jQuery 如何让您热链接到他们的 CDN 托管库）。我意识到这可能会令人困惑，我会澄清提出的任何问题。

4

2 回答 2

0

您可以将单个事件绑定到多个元素：

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

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

然后您只需要从数据中生成列表元素，可能基于 ajax 调用。对于这类事情，我通常在应用程序启动时在后台进行 ajax 调用，并保存该调用的先前结果，以便连接更新不会减慢应用程序的启动速度。

于 2012-11-20T00:24:51.603 回答
0

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

于 2012-11-19T13:50:25.700 回答