How to prevent backbone router to call event on page load

Question

I am a bit confused at the moment. My routes functions are being executed on the first load, which is not good in my case, because I am rendering the content with these functions and on the first load I am getting the duplicated content... Ok, I can add the control variable to prevent rendering on first init, but I would like to do it with pure backbone... Here is my code:

var Router = Backbone.Router.extend({
    routes: {
       "": "home",
       "home": "home",
       "about": "about",
    },
    home: function(){
        getContent("home")
    },
    about: function(){
        getContent("about")
    },
    initialize: function(){
        Backbone.history = Backbone.history || new Backbone.History({silent:true});
    root = "kitchenV3/"+lang;
    var enablePushState = true;
    var pushState = !! (enablePushState && window.history && window.history.pushState);
    Backbone.history.start({
        silent: true,
        pushState: pushState,
        root: root
    });
    }

});

On the other side, if i remove ,,home" and ,,about" methods and write them this way, they are not executed on the first load. But what is the actual difference between these two? Is it possible to write the code like on the first example, but to prevent execution on the first load?

router.on('route:home', function(id) {
      getContent("home")
});

Thank you for all answers...

What's the point of `Backbone.history = Backbone.history || new Backbone.History({silent:true});`? Backbone does it for you, I wouldn't mess with it. — Loamhoof, Apr 02 '13 at 13:43
Also, little mistake but `"about": "about",`: IE won't like that last comma. (But maybe it's only part of your code) — Loamhoof, Apr 02 '13 at 13:45

Loamhoof · Answer 1 · 2013-04-02T13:48:39.883

3

From Backbone's doc:
"If the server has already rendered the entire page, and you don't want the initial route to trigger when starting History, pass silent: true."

As for the difference between your 2 examples: when you start Backbone's history in the second case, no routes are bound, so obviously no code is executed.

Edit:
Successfully tested.
You'll have an alert. Then replace Backbone.history.start() by Backbone.history.start({silent: true}) and nothing will happen.

Furthermore, digging into Backbone.history#start:

if (!this.options.silent) return this.loadUrl();

So... I don't know, but if it doesn't work for you, I'll guess we'll need more information.

Edit 2:
I've changed what I told you in the comments, and this is the result. Once again, simply remove the silent: true to see the difference.

edited Apr 02 '13 at 13:48

answered Apr 02 '13 at 12:50

Loamhoof

8,293
27
30

This is what you are proposing, right? But i have still the same effect... Backbone.history.start({ pushState: pushState, root: root, silent: true }); – hjuster Apr 02 '13 at 12:54
I don't know about the pushState and root flags as it has no link, but yeah, passing `{silent: true}`. – Loamhoof Apr 02 '13 at 12:56
That is working fine when dealing with the hashbangs, but when using pushstate its not good... See my edits... Btw, tnx for helping me out! – hjuster Apr 02 '13 at 13:37
Grmblbl pushState... bugger that ><. Checking but I'm no expert on the subject. – Loamhoof Apr 02 '13 at 13:41

How to prevent backbone router to call event on page load

1 Answers1