1

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

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

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

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

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

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

4

2 回答 2

0

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

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

于 2012-09-20T15:47:03.323 回答
0

我使用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 }
   });
于 2012-09-20T20:46:51.463 回答