6

私のサイトはBackbone.jsにpushstatesを実装したばかりで、サイト全体がIE用に壊れています。IEのフォールバックを作成するにはどうすればよいですか？

私が達成しようとしていること

メインURL：http://mydomain.com/explore

別のURL：'http://mydomain.com/explore/1234

サイトのメインページはhttp://mydomain.com/explore、ルーター機能をトリガーするページですexplore。

ユーザーがhttp://mydomain.com/explore/1234にアクセスすると、Backboneのルーターが関数をトリガーしますviewListing。これは関数と同じですが、exploreアイテムIDの詳細も含まれています1234。

Backbone.jsルーター

// Router
var AppRouter = Backbone.Router.extend({
    routes: {
        'explore': 'explore',
        'explore/:id': 'viewListing',
    },

    explore: function() {
        this.listingList    = new ListingCollection();
        // More code here
    },

    viewListing: function(listing_id) {
        this.featuredListingId = listing_id;    // Sent along with fetch() in this.explore()
        this.explore();
    }
});

App = new AppRouter();

// Enable pushState for compatible browsers
var enablePushState = true;  

// Disable for older browsers (IE8, IE9 etc)
var pushState = !!(enablePushState && window.history && window.history.pushState);

if(pushState) {
    Backbone.history.start({
        pushState: true,
        root: '/'
    })
} else {
    Backbone.history.start({
        pushState: false,
        root: '/'
    })
}

問題：上記のコードでわかるように pushState: false、互換性のないブラウザの場合は、でプッシュステートを無効にしようとしました。

http://mydomain.com/exploreただし、IEが通常のブラウザ（ ）で通常機能するものにアクセスするには、IEにアクセスする必要があり、http://mydomain.com/explore/#explore混乱を招きます。http://mydomain.com/explore/1234IEにアクセスするには、さらに多くのことを行う必要がありますhttp://mydomain.com/explore/#explore/1234

これはどのように修正する必要がありますか？

4

1 に答える 1

2

URLが必要ない場合http://mydomain.com/explore/#exploreは、にリダイレクトする必要が http://mydomain.com/#exploreあるため、Backboneは代わりにURLから開始します。

if(!pushState && window.location.pathname != "/") {
  window.location.replace("/#" + window.location.pathname)
}

UPD：パスをハッシュとして設定するときは、おそらく先頭のスラッシュを削除する必要がありますwindow.location.pathname.substr(1)

UPD2：バックボーンルートのルートになりたい場合/explore/は、ルートから除外し、ルートとして設定する必要があります。History.start({root: "/explore/"})

routes: {
    '': 'explore',
    ':id': 'viewListing',
}
于 2012-11-06T15:11:00.713 に答える