Question

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

这是我的代码结构

的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（））;当用户点击浏览器后退按钮或导航到另一个hashbang时，它不遵循/ slideshow /：id /：页面语法？

我的上一个问题与路由器中的'导航'方法有关。在我的幻灯片视图中，我确保每当页面更改时更新哈希片段。这就是我的观点：

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

这可确保片段得到更新，以便用户可以在任何时候复制URL并在同一页面上打开。问题是我的实例化路由器中的'幻灯片放映'方法触发，即使我在第二个'navigate'参数（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);

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

1 个答案: