我正在使用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手机,所以我觉得我错过了什么。
我使用jquery移动路由器插件对具有脱机模式的单页应用程序进行了类似的操作,但它对多页应用程序的工作原理应该相同,因为对于多页应用,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 mobile时,除了选择页面之外,您确实不应该将哈希参数用于其他任何事情
标准的方法是通过file.html?parameter=value
传递参数,并通过javascript检索值
然后,您可以使用js函数处理此值,例如,如果您联机,则可以使用ajax调用检索数据,如果您脱机,则可以从本地存储读取数据。如果您想根据与参数相关的数据动态生成页面,可以通过绑定changepage
事件来完成,如果您想在页面显示后更改页面(例如填写表单元素),则可以绑定pageinit
事件来完成
或者,如果缓存清单的使用阻止您使用?parameter=value语法,可以使用以下方法:-将目标链接写为file.html#pagename_itemvalue
-绑定pagechange事件以覆盖默认行为,而是解析目标值,检索pagename
和itemvalue
,并生成/访问要显示的内容。你可以在这个页面上看到一个例子