使用Backbone.Router幻燈片

我使用Backbone.js創建幻燈片。我的幻燈片視圖已完成，每張幻燈片都是一個模型，所有模型都位於一個集合中。現在我想有點hashbang魔術適用於我的幻燈片:-)使用Backbone.Router幻燈片

這是我的代碼結構

的application.js
型號/幻燈片/ slide.js
收藏/幻燈片/ slides.js
的意見/ slideshow.js

在application.js中創建我的路由器：

var App = {}; 
App.Modules = { 
    Views: {}, 
    Models: {}, 
    Collections: {} 
}; 
App.slideshow = undefined; // Use this to maintain state between calls. 
App.router = (function() { 
    var Router = Backbone.Router.extend({ 
     routes: { 
      'slideshow/:id/:page': 'slideshow' 
     }, 
     slideshow: function(id, page) { 
      // Whenever this route handler triggers, I want to either: 
      //  1) Instantiate the slideshow, or: 
      //  2) Change the page on an already instantiated slideshow 
      if (App.slideshow && App.slideshow.options.id === id) { 
       App.slideshow.goToPage(page); 
      } else { 
       App.slideshow = new App.Modules.Views.Slideshow({ 
        id: id, 
        page: page 
       }); 
      } 
     } 
    }); 
    return new Router; 
})(); 

// Using jQuery's document ready handler. 
$(function() { 
    Backbone.history.start({ 
     root: '/' 
    }); 
});

這可以像我期望的那樣工作。我的幻燈片作爲疊加層工作，因此無論它在哪個頁面上實例化，它都會顯示在現有文檔的頂部。

我的第一個問題是如何關閉幻燈片（App.slideshow.close（））;當用戶點擊瀏覽器後退按鈕或導航到另一個不符合/ slideshow /：id /：頁面語法的hashbang？

我最後的問題與路由器中的「導航」方法有關。在我的幻燈片視圖中，我確保每當頁面更改時都更新散列片段。這是我在我看來，這樣做：

pageChange: function(page) { 
    App.router.navigate('slideshow/' + this.options.id + '/' + page, false); 
}

這可以確保片段被更新，以便在任何時候，用戶可以複製的URL，它會在同一頁上打開。問題是，即使我在第二個'navigate'參數（triggerRoute）中傳遞false，我的實例化路由器中的'slideshow'方法也會觸發。爲什麼是這樣？

來源

2011-11-16 Morten

所以，我已經解決了我的第一個問題（請讓我知道這是否可以在完成更清潔）：在我的路由器中，我創建了一個新路由：'* other'：'defaultRoute'。然後在我的defaultRoute處理程序中執行：if（App.slideshow）App.slideshow.close（）; – Morten

你確定你沒有在別處調用你的'slideshow'方法嗎？其餘的觀點也可以提供幫助。 –

所以，我想我已經想通了。請讓我知道是否有更乾淨的方法來做到這一點。

閱讀http://msdn.microsoft.com/en-us/scriptjunkie/hh377172後，我看見你可以在Backbone.js的做到這一點：

var router = Backbone.Router.extend({ 
    routes: { 
     '*other': 'defaultRoute' 
    }, 
    defaultRoute: function() { 
     if (App.slideshow) App.slideshow.close(); 
    } 
};

這確保一切不符合/幻燈片播放/：ID /：頁面將關閉幻燈片，如果它被實例化。

關於「導航」顯然是因爲我做了App.vent = _.extend({}, Backbone.events);很顯然，我必須這樣做：

App.vent = {}; 
_.extend(App.vent, Backbone.events);

來源

2011-11-23 08:21:55 Morten

使用Backbone.Router幻燈片

回答

相關問題