Render Backbone View on click (via Router push state)

Question

I've got an app with 3 pages which I'm trying to render on click. The first page is a landing page. The other two should be rendered upon clicking a link. They are all contained inside of the same container div#modal-content

My HTML is as follows:

My router function is as follows:

var Approuter = Backbone.Router.extend({
    initialize: function() {
        console.log('router initialized'); 
            Backbone.history.start({ pushState: true });   
    },

    routes: {
        '': 'main',
        'signup-page' : 'signup',
        'login-page' : 'login'
    },

    main: function() {
        this.landing = new LandingView({ el: $('#modal-content') });
        slider.slidePage(this.landing.$el);
    },

    signup: function() {
        this.signuppage = new SignUpView({ el: $('#modal-content') });
        console.log("LANDING VIEW: Signup clicked");
    },

    login: function() {
        this.loginpage = new LoginView({ el: $('#modal-content') });
        console.log("LANDING VIEW: Login clicked");
    }
});

And the view files are as follows:

var SignUpView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },

    render: function() {
        var template = Handlebars.compile($('#signUpPage').html());

        this.$el.html(template);
    },
});

and

var LoginView = Backbone.View.extend({
    initialize: function() {
        this.render();
    },

    render: function() {
        var template = Handlebars.compile($('#loginPage').html());

        this.$el.html(template);
    },
});

Additionally, here are my templates:

My Problem Upon clicking the a#signup-page or a#login-page links, I can see the url change to "localhost/#signup-page", but the view is not being rendered.

BUT When I refresh the page at localhost/#signup-page or localhost/#login-page, I see the views are rendered.

Where am I going wrong?

Claudio Santos · Accepted Answer

Please take a look at the code above:

Edit1: Differences between Routes and pushState

Backbone Routes enable you to monitoring hasChange history events (changes in url) and trigger some js code when found some change at url (http://localhost/backbone-test/#someRoute), That's amazing because we can trigger some complex actions done by user at your web site, just calling an url.

pushState enable you to hide this '#' hash and turn your url more readable, but as the backbone documentation said

"if you have a route of /documents/100, your web server must be able to serve that page, if the browser visits that URL directly."

Then, if you use pushState:true your url become more readable, http://localhost/backbone-test/#someRoute to http://localhost/backbone-test/someRoute but you need to create a back-end to answer directly access to you readable url.

When pushState is true and you call href="#someRoute" the browser understand this as a html anchor.

Render Backbone View on click (via Router push state)

Answers (1)

Related Questions