离线 Web 应用程序的 jQuery 移动问题答案

【问题标题】：jQuery mobile issues with offline web app离线 Web 应用程序的 jQuery 移动问题
【发布时间】：2012-09-20 15:37:10
【问题描述】：

我正在使用 jQuery mobile 开发一个应用程序，它将使用 HTML5 离线功能（缓存清单等）。

基本程序适用于现场技术人员在没有互联网连接的平板电脑上查看/修改他们的订单。我正在使用本地浏览器数据库来存储订单。

我有一个可以查看任何订单的 orders.html 页面 - 但要向它传递参数，我不能使用 GET 参数，因为程序处于脱机状态，我无法在清单中列出每个订单。

所以我必须使用哈希参数——例如orders.html#o4572。但是 jQuery mobile 不能很好地使用这个方案——它使用散列参数作为它自己的方案。当我在 list.html 并且有指向 orders.html#o4572 的链接时 - 它会将链接转换为 list.html#o4752 并停留在同一页面上。

我可以通过设置 $.mobile.linkBindingEnabled = false; 来关闭 jQuery mobile 的链接处理，但这会阻止所有 ajax 导航 - 你失去了漂亮的转换，并且弹出对话框不再“正常工作”，你必须手动进行。并且可能还有其他问题。

这是让它正常工作的唯一方法吗？我刚刚开始使用 jQuery mobile，所以我觉得我错过了一些东西。

【问题讨论】：

看看这个：github.com/azicchetti/jquerymobile-router。由 JQM 团队推荐。救了我。
我已经看到了，但它看起来需要一个单文件系统——其中没有 orders.html 和 list.html——而是一个 app.html。这个应用程序最终会变得非常大——如果它们都在同一个文件中，那么 DOM 将会太大。更多的维护痛苦。
是的，我的 SPA。但它确实允许您传递参数，而无需第一次缓存 url。我认为动态配置路由器也可能很痛苦。
@CrimsonChin 实际上我最终选择了这个，因为可以缓解 DOM 问题。如果你想给它一个答案，我给你。

标签： jquery-mobile parameters offline cache-manifest

【解决方案1】：

我使用jquery-mobile-router 插件和具有离线模式的单页应用程序做了类似的事情，但是对于多页应用程序来说应该是一样的，因为对于多页应用程序JQM 的默认行为（ajax-enabled 设置为true）是它拉入第二页并将其附加到当前页的 DOM。

使用 JQM 路由器，您应该能够做这样的事情

var router;

var orderHandlerRoute = function (eventType, matchObj, ui, page, evt) {
  var params = router.getParams(matchObj[1]);
  //use your params to pull data from localStorage  
};

router =  new $.mobile.Router({
     'orders.html(?:[?/](.*))?' : {handler: "orderHandler", events: 'bs'}
     , {orderHandler: orderHandlerRoute }
   });

【讨论】：

我试过了，但是在单击指向不同页面的链接时出现 javascript 错误（例如，在 login.html 上，转到 orders.html）。跟踪代码，看起来仍然像 jQuery 移动问题，将指向 orders.html#orders?o=4572 的链接转换为 login.html#orders?o=4572。对话框也无法正常工作。
我不确定我是否完全理解你是如何从一个页面链接到另一个页面的（它应该类似于orders.html?o=4572），但你根本不应该使用哈希。如果您试图访问另一个页面中的特定页面，那么您应该意识到 JQM doesn't allow 那个。
我需要使用哈希参数，因为缓存清单需要预先声明所有页面。在链接中使用动态 GET 参数会使这成为不可能。我尝试以各种方式将参数链接到另一个页面，但无法正常工作。
我最终使用了路由器插件，但是在单页配置中支持哈希参数，所以我会给你答案，因为它是最接近的。

【解决方案2】：

在使用 jquery mobile 时，除了选择页面之外，您确实不应该将哈希参数用于其他任何事情。
进行的标准方法是使用 file.html?parameter=value 传递您的参数并通过 javascript 检索值。
然后，您可以使用 js 函数处理此值，例如，如果您在线，可以使用 ajax 调用检索数据，或者如果您离线，则可以从本地存储中读取数据。这可以通过绑定changepage 事件来完成，如果您想根据与参数关联的数据动态生成页面，或者如果您想在页面显示后更改页面，则可以通过绑定pageinit 事件来完成（例如填写表单元素）

或者，如果使用缓存清单阻止您使用 ?parameter=value 语法，您可以使用以下方法： - 将您的目标链接写为file.html#pagename_itemvalue - 绑定 pagechange 事件以覆盖默认行为，而是解析目标值，检索 pagename 和 itemvalue，并生成/访问您要显示的内容。你可以在this page上看到一个例子

【讨论】：

正如我在问题中提到的 - 由于它是离线应用程序，我无法使用您提到的页面参数。我需要将所有可能的页面都放在缓存清单中。
离线并不妨碍您访问参数。例如，this 将在离线模式下工作。
是的，但是 HTML 5 缓存清单要求每个要离线使用的页面都必须在其中。 file.html?parameter=value 与 file.html 是不同的页面，但根据 manifest，file.html 和 file.html#o4572 是 same 页面。
谢谢它更清楚了，我已经添加了一种方法可以让你克服这个限制
嗯，这将需要在应用程序中动态创建每个页面（会有更多页面，所有页面都有很多参数）。它会起作用，但我不确定它是否比关闭默认链接行为更好。