Question

我正在使用Ratchet附带的电影演示应用应用作为我的应用的模板。

我做的第一件事就是将索引页面上的静态html电影更改为jQuery ajax获取的电影。但我遇到的问题是，当我回到索引页面时，它是空的，因为javascript获取和生成的内容没有被缓存。

此处出现同样的问题： https://groups.google.com/forum/#!topic/goratchet/3nlzW_A8Tys

解决方案是addEventListener（“push”）并缓存页面，但我不清楚如何实现这一点。

我是否必须使用Push来获取内容，如果是这样的话？
如何缓存页面？

Answer 1

Push.js在您离开页面之前缓存上下文，并将其缓存在由导航事件的时间戳键入的关联数组domCache中。要通过触发带有时间戳的popstate事件返回缓存页面。

var e = new CustomEvent('popstate')
e.state = <cached-timetamp-key>
window.dispatchEvent(e)

缓存的项目密钥是缓存的后台堆栈cacheMapping.cachedBackStack

中的最后一项

所以，如果你向push.js添加一个方法（在你的ratchet.js文件中）以返回backstack中的下一个项目

var getPreviousId = function () {
    var backStack = JSON.parse(cacheMapping.cacheBackStack);
    return backStack.length > 0 ? backStack[backStack.length -1] : null;
}

并保存保存当前ID的先前ID，例如发现

PUSH.id = data.id;

并添加该行以显示先前的ID

PUSH.id = data.id;
PUSH.previousId = getPreviousId(); //save previous id

然后您可以使用以下

返回缓存页面

var e = new CustomEvent('popstate');
e.state = PUSH.previousId;
window.dispatchEvent(e);

如果你想让棘轮自动处理，你必须在适当的时候进入touchend()方法或PUSH（）本身调用popstate()。

Javascript生成的内容未缓存Ratchet v2.0.2

1 个答案: