使用 Backbone.Router 进行幻灯片放映答案

【问题标题】：Using Backbone.Router for a slideshow使用 Backbone.Router 进行幻灯片放映
【发布时间】：2011-12-30 04:25:36
【问题描述】：

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

这是我的代码结构

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

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

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

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

【问题讨论】：

所以，我已经解决了我的第一个问题（请让我知道这是否可以在清洁器中完成）：在我的路由器中，我创建了一个新路由：'*other':'defaultRoute'。然后在我的 defaultRoute 处理程序中执行： if (App.slideshow) App.slideshow.close();
您确定没有在其他地方调用您的slideshow 方法吗？拥有视图的其余部分也会有所帮助。

标签： javascript backbone.js

【解决方案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);

【讨论】：