Backbone router not working on page load

Question

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.

Here is my code:

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

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.

Cheers.

UPDATE

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

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.

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.

UPDATE

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

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

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
    }

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

Yep, it pretty much works like a carousel, but with whole pages loaded via AJAX — lukehillonline, Mar 05 '14 at 13:28
So for example, if I load `http://www.website.com/our-approach.html` then I would expect the function `instantiateOurApproach` to run on page load. — lukehillonline, Mar 05 '14 at 14:29

score 1 · Accepted Answer · answered Mar 06 '14 at 10:58

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.

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.

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.

score 0 · Answer 2 · answered Mar 05 '14 at 16:56

0

You haven't define the pageAction function in your router :

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
        ...
    }

answered Mar 05 '14 at 16:56

Rida BENHAMMANE

4,111
1
14
25

I have defined it, but i didn't include it in the code example above as what this function does is not relevant. I am 90% of the way to solving this issue myself, I will post the answer myself when done. But basically I am going about it all the wrong way. haha. Thanks for your answer. – lukehillonline Mar 05 '14 at 17:32
Ok, so if you need any help let me know. – Rida BENHAMMANE Mar 05 '14 at 17:40

Backbone router not working on page load

2 Answers2

Linked