在PushState單頁應用程序中將URL片段（＃）用於模式視圖

Question

我們在僅推送狀態模式下使用Backbone.Router ，因此我們所有的客戶端路由都是無哈希的 。
但是，我們在應用程序中實現模態視圖時遇到了困難。

挑戰如下：

• 我們希望“后退”按鈕隱藏當前的模式視圖（因此我們需要它具有一個URL）；
• 我們希望Forward再次顯示它而不重繪整個應用程序；
• 我們希望能夠在任何現有路線的頂部而不是僅在一頁上顯示模式。
• 我們希望能夠建立立即顯示特定模式的鏈接（例如登錄模式視圖）。

換句話說， 我們希望在歷史中代表模態視圖 。

我們的第一個嘗試是使用/login類的URL進行登錄模式，並在route處理程序中專門處理它們。 當我們在/otherpage ，打開模式將導航到/login ，而當模式被關閉時，再次導航到/otherpage 。

但是，這有一個非常主要的問題：像/login這樣的URL並不“知道”應該繪制哪個視圖，因此在按Back and Forward時，我們必須重新繪制所有內容。

這實際上是有道理的：“主頁”屏幕上的登錄模式應具有與“其他頁面”上的登錄模式不同的URL。

我的第二個想法是， 也許我們可以使用散列來指示當前的模態視圖 ：

/
/#login
/otherpage
/otherpage#login

這使路由處理程序變得簡單：

• 首先，像之前一樣，根據匹配的路線繪制實際視圖。
• 之后，如果存在哈希，則在頂部顯示模式視圖。

這也符合哈希是可見文檔的“碎片”的想法。 （是的， 應用不是文檔 ，等等。我們仍然希望它們能夠被尋址。）

這種方法有什么內在的問題嗎？
有沒有更好的方法可以滿足我們的條件？

Answer 1

如果我正確理解了您的問題，那么我不認為您需要一個哈希，並且我相信您可以通過簡單地添加更多路由來實現模式。 如果需要在其他現有路由上支持登錄模式，只需添加另一條將登錄添加到末尾的路由即可。 這是一個示例：

var Login = Backbone.Model.extend({
    closeLogin: function () {
        this.set({ open: false }, { silent: true });
        this.trigger('loginClosed');
    }
});

var LoginView = Backbone.View.extend({
    el: '#loginModal',     
    initialize: function () {
        this.listenTo(this.model, 'loginClosed', this.closeLogin);
    },
    closeLogin: function () {
        // do whatever you would normally do to close the modal
    }
});

var Router = Backbone.Router.extend({
    routes: {
        '/login': 'defaultRouteLogin',
        '': 'defaultRoute',
        'otherpage/login': 'otherPageRouteLogin',
        'otherpage': 'otherPageRoute'
    },
    defaultRoute: function () {
        // defaultRoute behaviors
        this.login.closeLogin();
    },
    defaultRouteLogin: function () {
        // defaultRoute behavior
        // instantiate login modal
    },
    otherPageRoute: function () {
        // otherPageRoute behavior
        this.login.closeLogin();
    },
    otherPageRouteLogin: function () {
        // otherPageRoute behavior
        // instantiate login modal
    },
    initialize: function () {
        this.login = new Login();
        this.loginView = new LoginView({ model: this.login });
    }
});

要支持后退按鈕行為，請使用一種方法來關閉您可以打開模式的每條路徑上的登錄模式。 確保正確訂購路線。