骨干路由器无法在页面加载中工作 [英] Backbone router not working on page load

问题描述

我有一个很好的主干应用程序，除了页面加载时的路由选择.我需要使用路由器来实例化页面加载时的正确视图，但是由于某些原因，这些功能不会触发.

I have a backbone application which works great, except for the routing on page load. I need to use the router to instantiate the correct view on page load, but for some reason the functions wont fire.

这是我的代码:

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事实有关，或者如果我完全做错了事，我对骨干知识还很陌生，所以任何帮助和解释都很好.

I am unsure if the problem is related to the fact that I have pushState: true, or if I am just doing something wrong altogether, I am quite new to backbone so any help and explanation would be great.

干杯.

更新

因此，为了使情况更清楚一点，下面将使用以下URL:

So just to make things a little clearer, here are the following URLs that will be in use:

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代码，每页上唯一的区别是已定义的contains元素内的HTML.

All of these pages will be using the same HTML and JS code, the only difference on each page will be the HTML inside a defined containing element.

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

For example when I navigate to http://www.website.com/our-approach.html I need the router to trigger for our-approach.html and run the function instantiateOurApproach and so on for the other URLs.

更新

好的，所以我想出了我的问题，我的最初路线:

OK so I have figure out my problem, my initial route:

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

在页面加载时不起作用，但绝对匹配任何URL，因此按照我在pageAction函数上方使用它们的顺序始终运行，这意味着视图实例化函数永远不会运行.

Does not work on page load, but matches absolutely any URL, so in the order that I have them above the pageAction function always runs meaning that the view instantiation function never runs.

如果我像这样交换订单:

If I swap the order round like so:

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函数不能运行，有什么办法可以同时运行两个函数吗?

The view instantiates correctly, but not my PageAction function doesn't run, is there any way to have both functions run?

推荐答案

好，所以为了回答我自己的问题，我使用了错误的方式，我使用以下路线匹配所有页面并尝试制定一种解决方案对于所有人:

OK, so to answer my own question I was going about this the wrong way, I was using the following route to match all pages and try and make one solution for all:

':page': 'pageAction',

作为所有页面的一种解决方案的问题是知道要在页面加载时实例化哪个视图.

The problem with this being one solution for all pages was knowing which view to instantiate on page load.

考虑到这是一个小型站点，不会有大量更改内容或新URL，因此像这样路由各个URL是很有意义的:

Considering this is a small site which wont have a large amount of changing content or new URLs it makes sense to route the individual URLs like so:

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

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

Now this means I know exactly which view to instantiate and when.

pageAction函数内部的其他功能应该取决于点击事件而不是路由.

The other functionality which was inside the pageAction function should have been dependent on click event not the routing.

最后，我似乎想对路由器做太多事情，更好的选择是仅使用路由器实例化视图并让其他所有事件都不会发生点击事件.

In the end it appears I was trying to do too much with the router and the better option is to only use the router to instantiate views and to let everything else run off click events.

这就是我的解决方案，请选择对与错的任何选项.

So that's my solution, please comment with any options on if this is right or wrong.

这篇关于骨干路由器无法在页面加载中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！