javascript - 实现 location.hash 双向绑定(bind)到 AJAX 记录上下文

Question

我有一个简单的 javascript AJAX 应用程序，允许搜索和选择记录。选择更新 location.hash 并加载关联的记录详细信息，理想情况下反之亦然(当哈希更改时加载记录)。当然，粗心的实现可能会导致循环和额外的面板闪烁。

我想要这种双向绑定(bind)的可预测且简洁的实现。

一种方法是仅在 hashchange 事件上加载记录，并在 UI 中选择记录时设置 location.hash。这看起来最简洁，但我担心这会降低使用轮询 hashchange 填充程序的旧浏览器中的记录单击响应能力。

另一种方法是在选择记录时记录导航(例如)状态，并在处理hashchange时清除它。 this question 中对此进行了介绍。 。但是，某些事件序列(例如快速点击“后退”多次)可能会导致显示内容与 URL 不一致。

您见过解决这些问题的实现吗？

Answer 1

为什么不使用HTML5 history API反而？所有现代浏览器都支持它

为了让事情变得更容易，您可以使用 history.js library使用历史记录/状态 API

使用该库，您可以订阅 URL 更新

History.Adapter.bind(window, 'statechange', function () {
    // event handler code here
    var state = History.getState();
}

或者将新的 URL 推送到历史记录

History.pushState(null, "name", "http://newurl");

我不确定您想使用哪个 JS 框架来获得双向绑定(bind)，但是使用 KnockoutJS，您可以使用读取和写入方法创建 ko.compulated 对象