これに対する私の解決策は、私が望んでいたよりも自動化されていないものになりましたが、少なくとも一貫性があります。
これは、保存と復元のための私のコードでした。このコードは、私の試みから実際のソリューションにほとんど引き継がれ、さまざまなイベントで呼び出されました。「ソフト」は、Router.navigate（）への「ハード」呼び出しではなく、ブラウザのアクション（戻る、進む、またはハッシュクリック）から発生したことを示すフラグです。ナビゲート（）呼び出し中に、一番上までスクロールしたかっただけです。
restoreScrollPosition: function(route, soft) {
var pos = 0;
if (soft) {
if (this.routesToScrollPositions[route]) {
pos = this.routesToScrollPositions[route];
}
}
else {
delete this.routesToScrollPositions[route];
}
$(window).scrollTop(pos);
},
saveScrollPosition: function(route) {
var pos = $(window).scrollTop();
this.routesToScrollPositions[route] = pos;
}
また、Backbone.Historyを変更して、「ソフト」な履歴変更（checkUrlと呼ばれる）への対応と、プログラムによる「ハード」な履歴変更のトリガーの違いがわかるようにしました。このフラグをルーターコールバックに渡します。
_.extend(Backbone.History.prototype, {
// react to a back/forward button, or an href click. a "soft" route
checkUrl: function(e) {
var current = this.getFragment();
if (current == this.fragment && this.iframe)
current = this.getFragment(this.getHash(this.iframe));
if (current == this.fragment) return false;
if (this.iframe) this.navigate(current);
// CHANGE: tell loadUrl this is a soft route
this.loadUrl(undefined, true) || this.loadUrl(this.getHash(), true);
},
// this is called in the whether a soft route or a hard Router.navigate call
loadUrl: function(fragmentOverride, soft) {
var fragment = this.fragment = this.getFragment(fragmentOverride);
var matched = _.any(this.handlers, function(handler) {
if (handler.route.test(fragment)) {
// CHANGE: tell Router if this was a soft route
handler.callback(fragment, soft);
return true;
}
});
return matched;
},
});
もともと私は、ハッシュ変更ハンドラーの間にスクロールの保存と復元を完全に実行しようとしていました。具体的には、ルーターのコールバックラッパー内で、実際のルートハンドラーを呼び出す無名関数。
route: function(route, name, callback) {
Backbone.history || (Backbone.history = new Backbone.History);
if (!_.isRegExp(route)) route = this._routeToRegExp(route);
if (!callback) callback = this[name];
Backbone.history.route(route, _.bind(function(fragment, soft) {
// CHANGE: save scroll position of old route prior to invoking callback
// & changing DOM
displayManager.saveScrollPosition(foo.lastRoute);
var args = this._extractParameters(route, fragment);
callback && callback.apply(this, args);
this.trigger.apply(this, ['route:' + name].concat(args));
// CHANGE: restore scroll position of current route after DOM was changed
// in callback
displayManager.restoreScrollPosition(fragment, soft);
foo.lastRoute = fragment;
Backbone.history.trigger('route', this, name, args);
}, this));
return this;
},
hrefクリック、戻るボタン、進むボタン、navigate（）呼び出しなど、すべての場合に保存できるため、この方法で処理したかったのです。
ブラウザには、ハッシュ変更時にスクロールを記憶し、ハッシュに戻るときにそのスクロールに移動しようとする「機能」があります。通常、これは素晴らしいことであり、自分で実装する手間を省くことができます。問題は、多くの場合と同様に、私のアプリがDOMの高さをページごとに変更することです。
たとえば、私は背の高い#listビューを表示していて、一番下までスクロールしてから、アイテムをクリックして、スクロールバーがまったくない短い#detailビューに移動します。[戻る]ボタンを押すと、ブラウザは#listビューの最後の位置までスクロールしようとします。しかし、ドキュメントはまだそれほど高くないので、そうすることはできません。#listのルートが呼び出され、リストを再表示するまでに、スクロール位置は失われます。
そのため、ブラウザの内蔵スクロールメモリを使用できませんでした。ドキュメントを固定の高さにしたり、DOMのトリックを実行したりしない限り、やりたくありませんでした。
さらに、saveScrollPositionの呼び出しが遅すぎるため、この組み込みのスクロール動作は上記の試みを台無しにします。ブラウザーはその時点ですでにスクロール位置を変更しています。
これに対する解決策は明らかでしたが、ルートコールバックラッパーの代わりにRouter.navigate（）からsaveScrollPositionを呼び出すことでした。これにより、ブラウザーがhashchangeで何かを実行する前に、スクロール位置を保存していることが保証されます。
route: function(route, name, callback) {
Backbone.history || (Backbone.history = new Backbone.History);
if (!_.isRegExp(route)) route = this._routeToRegExp(route);
if (!callback) callback = this[name];
Backbone.history.route(route, _.bind(function(fragment, soft) {
// CHANGE: don't saveScrollPosition at this point, it's too late.
var args = this._extractParameters(route, fragment);
callback && callback.apply(this, args);
this.trigger.apply(this, ['route:' + name].concat(args));
// CHANGE: restore scroll position of current route after DOM was changed
// in callback
displayManager.restoreScrollPosition(fragment, soft);
foo.lastRoute = fragment;
Backbone.history.trigger('route', this, name, args);
}, this));
return this;
},
navigate: function(route, options) {
// CHANGE: save scroll position prior to triggering hash change
nationalcity.displayManager.saveScrollPosition(foo.lastRoute);
Backbone.Router.prototype.navigate.call(this, route, options);
},
残念ながら、テンプレートでhref = "＃myhash"を使用するのではなく、スクロール位置を保存したい場合は、常に明示的にnavigate（）を呼び出す必要があることも意味します。
しかたがない。できます。:-)