Question

我正在使用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导航 - 你会失去漂亮的过渡效果，而弹出式对话框并不会只是工作＆＃39;你必须手动完成它们。可能还有其他问题。

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

Answer 1

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

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

上看到相关示例

Answer 2

我使用jquery-mobile-router插件和一个具有离线模式的单页应用程序做了类似的事情，但是对于多页应用程序它应该有相同的功能，因为它具有多页app 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 }
   });

离线网络应用程序的jQuery移动问题

2 个答案: