ユーザーページを持つサイトがあります。そのページには、ユーザーのプロファイルを調べるためのリンクがいくつかあります。これらのリンクのいずれかがクリックされると、URL が変更されますが、ユーザーのバナーを含むページの上部 3 分の 1 はリロードされないようにしたいと思います。
Backbone.js を使用しています
私は自分が扱っている問題の理解が不十分で、間違った質問をしているような状況の 1 つにいるような気がします。そうであると思われる場合はお知らせください。
ユーザーページを持つサイトがあります。そのページには、ユーザーのプロファイルを調べるためのリンクがいくつかあります。これらのリンクのいずれかがクリックされると、URL が変更されますが、ユーザーのバナーを含むページの上部 3 分の 1 はリロードされないようにしたいと思います。
Backbone.js を使用しています
私は自分が扱っている問題の理解が不十分で、間違った質問をしているような状況の 1 つにいるような気がします。そうであると思われる場合はお知らせください。
私の間違いは、バックボーンでこれを行う特別な組み込みの方法があると仮定したことです。ありません。
次のコード行を実行するだけです
window.history.pushState('object or string', 'Title', '/new-url');
ページをリロードせずにブラウザの URL が変更されます。今すぐブラウザで JavaScript コンソールを開いて、このページで試してみてください。この記事では、それがどのように機能するかについて詳しく説明します (この SO 投稿に記載されているように)。
ここで、次のイベントをドキュメント オブジェクトにバインドしました (単一ページのサイトを実行しています)。
bindEvents: () ->
$(document).on('click', 'a', @pushstateClick)
pushstateClick: (e) ->
href = e.target.href || $(e.target).parents('a')[0].href
if MyApp.isOutsideLink(href) == false
if e.metaKey
#don't do anything if the user is holding down ctrl or cmd;
#let the link open up in a new tab
else
e.preventDefault()
window.history.pushState('', '', href);
Backbone.history.checkUrl()
詳細については、この投稿を参照してください。
Backbone.history.start() への呼び出しにオプションを渡すことができることに注意してくださいpushstate: true
。ただし、これにより、特定のページ (example.com/exampleuser/followers など) に直接移動すると、単にではなくバックボーン ルートがトリガーされるようになります。どこにも通じない。
この状況では、ルーターがあなたの味方です。基本的に、いくつかの異なるルートを持つルーターを作成します。ルートは異なるビューを呼び出します。これらのビューは、定義したページの部分にのみ影響します。このビデオが役立つかどうかはわかりませんが、ルーターがページとどのようにやり取りするかについてのアイデアが得られるかもしれません: http://www.youtube.com/watch?v=T4iPnh-qago
初歩的な例を次に示します。
myapp.Router = Backbone.Router.extend({
routes: {
'link1': 'dosomething1',
'link2': 'dosomething2',
'link3': 'dosomething3'
},
dosomething1: function() {
new myapp.MyView();
},
dosomething2: function() {
new myapp.MyView2();
},
dosomething3: function() {
new myapp.MyView3();
}
});
URL は www.mydomain.com/#link1 のようになります。
また、<a href=''></a>
タグはページの更新を自動的に呼び出すため、.preventDefault(); を呼び出していることを確認してください。ページを更新したくない場合は、それらをオンにします。