javascript - 使用 Backbone.Router 进行幻灯片放映

Question

我正在使用 Backbone.js 创建幻灯片。我的幻灯片 View 已完成，每张幻灯片都是一个模型，所有模型都在一个集合中。现在我想在我的幻灯片中应用一点 hashbang 魔法:-)

这是我的代码结构

1. application.js
2. models/slideshow/slide.js
3. collections/slideshow/slides.js
4. views/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())；当用户点击浏览器后退按钮或导航到另一个 hashbang 时，它不遵循/slideshow/:id/:page 语法？

我的最后一个问题与路由器中的“导航”方法有关。在我的幻灯片 View 中，我确保在页面更改时更新哈希片段。我认为这就是我所做的:

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

这可确保片段得到更新，以便用户随时可以复制 URL 并将其在同一页面上打开。问题是，即使我在第二个“导航”参数(triggerRoute)中传递 false，实例化路由器中的“幻灯片”方法也会触发。这是为什么？

Answer 1

所以，我想我已经明白了。如果有更干净的方法可以做到这一点，请告诉我。

阅读后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();
    }
};

这可以确保与/slideshow/:id/:page 不匹配的所有内容在实例化后都会关闭幻灯片。

关于“导航”显然是因为我做了 App.vent = _.extend({}, Backbone.events); 显然，我必须这样做:

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