Question

我有一个很好的骨干应用程序，除了页面加载的路由。我需要使用路由器在页面加载时实例化正确的视图，但由于某种原因，函数不会触发。

这是我的代码：

var Router = Backbone.Router.extend({
    routes: {
        ':page': 'pageAction', // Igonre this route - this fires successfully after an AJAX call
        'our-approach.html': 'instantiateOurApproach',
        'our-work.html': 'instantiateOurWork',
        'who-we-are.html': 'instantiateWhoWeAre',
        'social-stream.html': 'instantiateSocialStream',
        'contact.html': 'instantiateContact'
    },
    instantiateOurApproach: function() {
        var our_approach_view = new OurApproachView();
    },
    instantiateOurWork: function() {
        var our_work_view = new OurWorkView();
    },
    instantiateWhoWeAre: function() {
        var who_we_are_view = new WhoWeAreView();
    },
    instantiateSocialStream: function() {
        var social_stream_view = new SocialStreamView();
    },
    instantiateContact: function() {
        var contact_view = new ContactView();
    }
});

var router = new Router();

Backbone.history.start({pushState: true, root: "website/url/"}); // LOCAL URL

我不确定问题是否与我pushState: true的事实有关，或者如果我只是做错了，我对骨干很新，所以任何帮助和解释都会很棒。

干杯。

更新

所以只是为了让事情更清楚一点，以下是将要使用的以下网址：

http://www.website.com/our-approach.html
http://www.website.com/our-work.html
http://www.website.com/who-we-are.html
http://www.website.com/social-stream.html
http://www.website.com/contact.html

所有这些页面都将使用相同的HTML和JS代码，每个页面的唯一区别将是定义的包含元素中的HTML。

例如，当我导航到http://www.website.com/our-approach.html时，我需要路由器触发our-approach.html并运行函数instantiateOurApproach，依此类推其他网址。

更新

好的，所以我找出了我的问题，我的初步路线：

':page': 'pageAction', // Igonre this route - this fires successfully after an AJAX call

不适用于页面加载，但绝对匹配任何URL，因此按照我在上面的顺序，pageAction函数始终运行意味着视图实例化函数永远不会运行。

如果我像这样交换订单：

routes: {
        'our-approach.html': 'instantiateOurApproach',
        'our-work.html': 'instantiateOurWork',
        'who-we-are.html': 'instantiateWhoWeAre',
        'social-stream.html': 'instantiateSocialStream',
        'contact.html': 'instantiateContact'
        ':page': 'pageAction', // Igonre this route - this fires successfully after an AJAX call
    }

视图正确实例化，但我的PageAction函数没有运行，有没有办法让两个函数都运行？

Answer 1

您尚未在路由器中定义pageAction功能：

var Router = Backbone.Router.extend({
    routes: {
        'our-approach.html': 'instantiateOurApproach',
        'our-work.html': 'instantiateOurWork',
        'who-we-are.html': 'instantiateWhoWeAre',
        'social-stream.html': 'instantiateSocialStream',
        'contact.html': 'instantiateContact',
        ':page': 'pageAction' // Igonre this route - this fires successfully after an AJAX call
    },

    pageAction: function() { // the missing function
        ...
    }

Answer 2

好的，所以为了回答我自己的问题，我的方法是错误的，我使用以下路线来匹配所有页面并尝试为所有人提供一个解决方案：

':page': 'pageAction',

这是所有页面的一个解决方案的问题是知道在页面加载时实例化哪个视图。

考虑到这是一个小网站，它不会有大量不断变化的内容或新网址，因此路由各个网址是有意义的：

'our-approach.html': 'instantiateOurApproach',
'our-work.html': 'instantiateOurWork',
'who-we-are.html': 'instantiateWhoWeAre',
'social-stream.html': 'instantiateSocialStream',
'contact.html': 'instantiateContact'

现在这意味着我确切地知道要实例化哪个视图以及何时。

pageAction函数中的其他功能应该依赖于click事件而不是路由。

最后看起来我试图用路由器做太多事情，更好的选择是只使用路由器实例化视图并让其他所有内容都运行点击事件。

所以这是我的解决方案，如果这是对或错，请评论任何选项。

Backbone路由器无法处理页面加载

2 个答案: