web-dev-qa-db-ja.com

バックボーンアプリケーションでページを更新する方法

バックボーンを使用してWebアプリを構築しています。

現在、ホームページにいる場合、「ホーム」ボタンをもう一度クリックするだけでは同じページを更新できないという問題に直面しています。

これはバックボーンによって提供される制限だと思います（同じURLが呼び出された場合、ページをリロードしません）

enter image description here

これを回避する方法はありますか？ホームボタンをもう一度クリックしたときにページのリロードをトリガーできるように、つまり同じURLを再度呼び出しますか？

javascriptbackbone.jspage-refresh
28
Zhen

Backbone.jsのソースを見ると、URLの変更にのみ応答するため、これはデフォルトでは不可能なようです。また、同じリンクをクリックすると、変更イベントがトリガーされなくなります。

Backbone.Historyのコード：

$(window).bind('hashchange', this.checkUrl);

自分で非変更を処理する必要があります。私がやったことは次のとおりです。

$('.nav-links').click(function(e) {
    var newFragment = Backbone.history.getFragment($(this).attr('href'));
    if (Backbone.history.fragment == newFragment) {
        // need to null out Backbone.history.fragement because 
        // navigate method will ignore when it is the same as newFragment
        Backbone.history.fragment = null;
        Backbone.history.navigate(newFragment, true);
    }
});
29
Thanh Nguyen

あなたが探しています Backbone.history.loadUrl。 注釈付きソース から：

現在のURLフラグメントをロードしようとします。ルートが一致して成功した場合、trueを返します。フラグメントに一致する定義済みのルートがない場合、falseを返します。

そのため、単純な更新リンクの場合、次のイベントをBackbone.View：

events: {
  'click a#refresh': function() {
    Backbone.history.loadUrl();
    return false;
  }
}
38
amiuhle

目的のビューでページ全体をリロードする場合。これにより、ホームボタンが表示される場合があります。利点は、メモリが更新されることです。

ロードせずに（「true」なしで）任意のルートに移動し、リロードします

Backbone.history.navigate('route/goes/here');
window.location.reload();
8
guya

Backbone.history.loadUrlがソリューションです。

ホームボタンのクリック処理機能（ホームがWebAppのルートである場合）は次のようになります。

myAppRouter.navigate('');
Backbone.history.loadUrl();
6
Synn

デフォルトで正しく実行されたポートレートモードのcssメディアクエリのすべてではないため、方向変更イベントでページを「更新」する必要がありました。これは私がやったことです：

Backbone.history.fragment = null;
Backbone.history.navigate(document.location.hash, true);

もちろん、この答えを完全にするために、これはいくつかの方向変更処理コードでラップされました。

window.addEventListener('orientationchange', function () {
    Backbone.history.fragment = null;
    Backbone.history.navigate(document.location.hash, true); 
}, false);
2
Bas Slagter

最後に乱数を追加して、URLに無意味な変更を加えることもできます。

var url = $(this).attr('href') + '?rand=' + Math.floor(Math.random() * 1000);
Backbone.history.navigate(url, true);

これは、IEに対して特に便利です。URLが変更されていない場合、AJAX呼び出しを介して新しいデータを要求しないためです。

1
user2498689

以下の方法を使用して、ページを簡単に更新できます。

@win_loc = window.location.toString().replace("#","")
Backbone.history.redirectTo(@win_loc)
1
Sumit Munot

再利用可能なコードスニペットを提供するために、Backbone.Viewにヘルパーメソッドを追加して、Backboneルータの制限にもかかわらず同じページをリロードする必要がある場所で再利用できるようにしました。

App.jsファイルまたはその他の適切な場所

Backbone.View = Backbone.View.extend({
    refreshPage: function(e){
        if(e.target.pathname){
            Backbone.history.navigate(e.target.pathname);
        }
        window.location.reload();           
    }
});

このようにリンクがある場合

<a href="/whatever" id="whateverId">Some text </a>

ビューで、クリックイベントをそのコールバックにバインドするだけで、ページの更新機能を活用できます（refreshPageヘルパーがプロトタイプチェーンを通じて利用できる場合）。

events: {
    'click #whateverId': 'refreshPage', 
}

「タグ」を変更する必要がない限り、ボイラープレートコーディングを節約する、よりクリーンなソリューションです。

それが役に立てば幸い

0
Jaime Agudo

http://localhost.com/ と http://localhost.com/#!/ の違いは、2番目はアンカーへのリンクであり、ページをロードすると、現在のページでアンカーのみが検索され、見つかった場合はそのページまでスクロールします。リンクが最初のリンクのように見えるようにする必要があります。末尾に「＃」はありません。

0
clyfe

これまでの私のお気に入りのアプローチは次のとおりです。

 if (!Backbone.history.navigate(urlPath, true)) {
      Backbone.history.loadUrl();
 }
0
Guy

ルートを修正して感嘆符を含めることができます。これにより、hrefの末尾にランダムな文字列を追加して一意にすることができますが、それでも「ホーム」ルートに一致します。 （注：これを最後のルートにします。）

ルート内：

routes: {
    "*str": "home"
}

ビュー内：

render: function() {
    var data = {href: +(new Date())};
    _.extend(data, this.model.attributes);
    this.$el.html(this.template(data));
    return this;
}

テンプレート内（ここに示すハンドルバー）：

<a href="{{href}}">Home Link</a>
0
Nate Barr

で動作します

 myBackboneRouter.navigate("users", {trigger: true})
0
sri_bb

これはバックボーン次第ではありません。同じことはchrome（webkit browsers）ではうまくいきますが、firefoxではうまくいきません。ブラウザの動作

0
RameshVel