实现位置.双向绑定到AJAX记录上下文的散列

Question

我有一个简单的javascript AJAX应用程序，它允许搜索和选择记录。选择更新位置。散列并加载相关的记录细节，理想情况下，反之亦然(当散列更改时加载记录)。当然，粗心的实现可能会导致循环和额外的面板闪烁。

我想要一个可预测的、简洁的双向绑定实现。

一种方法是只在hashchange事件上加载一条记录，当一条记录在UI中被选中时，设置location.hash。这似乎是最简洁的，但我担心这将降低旧浏览器的记录点击响应与轮询hashchange shim。

另一种方法是在选择记录时记录navigating(例如)状态，在处理hashchange时清除它。这个问题已经涵盖了。然而，似乎某些事件序列，如快速点击多次返回，可能会导致显示的内容和URL之间的不一致。

你见过解决这些问题的实现吗?

Answer 1

为什么不使用HTML5历史API呢?所有现代浏览器都支持

为了让事情变得更简单，你可以使用History .js库来处理历史/状态api

使用这个库你可以订阅URL更新

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

或将新URL推送到历史记录

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

我不确定你想使用哪个JS框架来获得双向绑定，但与KnockoutJS你可以创建ko.computed对象与读写方法

Answer 2

我认为在我的情况下有一个简单的答案，因为它是一个只读/幂等操作(好吧，它实际上记录一个视图)。

我将只存储当前内容所显示的状态，并在每个将加载内容的事件(包括'冗余' hashchange事件)上进行测试，如果与当前显示的状态匹配，则忽略事件。

不管怎样，

似乎很便宜。:)

这是我的近似/伪代码:

var activeRecordId;
function loadHash() {
    var idList = window.location.hash.substring(1).split(',');
    if (idList.length > 1) loadSpecificRecordsToList(idList);
    else if (idList != '') loadDetailRecord(idList[0]);
}
function loadDetailRecord(id) {
    if (id != activeRecordId) {
        activeRecordId = id;
        doDetailLoadAjaxAndSuch(id);
    }
}
$(function () {
    loadHash();
    $.bind('hashchange', loadHash);
});