Backbone: Render view that has been created before

Question

I have the shell view that contains the navbar and the map. To this view is rendered other views that use the map previous rendered. When I'll go to the view perfil the map is removed, but the navbar is maintained, so far so good. My problem is when turn back to the home, the map doesn't appear only appears the div that contains the map. Bellow show the example:

View Shell and view Home: enter image description here

go to view Perfil: enter image description here

turn back to home:

enter image description here

heres my code:

app.js

var ev = new Application();

ev.Router = Backbone.Router.extend({ 
    routes: {
        "": "home",
        "evento/:id" : "evento",
        "criarevento" : "criarevento",
        "perfil" : "perfil"
    }, 

    home: function(){
        setTimeout(function(){
            $('#rightcolumn').html(new ev.views.Home(ev.shell.map).el);
        }, 0);

    },
    ... // other views
    perfil: function(){
        setTimeout(function(){
            $('#home').html(new ev.views.Perfil(ev.shell.template).el);
        }, 0); 
    }
});

$(document).on('ready', function() {
    ev.user = new ev.models.Person(); // Holds the authenticated Facebook user
    // Load HTML templates for the app
    ev.templateLoader.load(['shell', 'home', 'search_keyword', 'evento', 'login', 'quemvai', 'criar_evento', 'home_criar_evento', 'perfil'], function () {
        ev.shell = new ev.views.Shell({el: "#shell", model: ev.user});
        ev.router = new ev.Router();
        Backbone.history.start();
    });
});

perfil.js

ev.views.Perfil = Backbone.View.extend({
    initialize: function(temp, model){
        var that = this;
        that.template = _.template(ev.templateLoader.get('perfil'));
        that.template2 = temp;
        //console.log(this.view);
        ev.router.on("route", function(route, params) {
            that.$el.html(that.template2());
        });
        that.render();  
    },
    render: function(map){
        this.$el.html(this.template()); 
        return this;
    }
});

So far I created an event that when route changes, the shell template that I step to the view perfil is called. But it's not working. What I'm doing wrong?

EDITS: I change my constructor in view perfil, so that when route changes only fire once and call the render function of ev.shell

 ev.views.Perfil = Backbone.View.extend({
        initialize: function(){
            var that = this;
            that.template = _.template(ev.templateLoader.get('perfil'));
            ev.router.once("route", function(route, params) {
                ev.shell.render();
            });
            that.render();  
        },
        render: function(map){
            this.$el.html(this.template()); 
            return this;
        }
    });

score 2 · Answer 1 · answered Dec 29 '14 at 16:21

It looks like you have a document ready even that loads the shell including the map. When you go to the profile page you replace the contents of the #home element. Then when you go back to home you replace the contents of the #rightcolumn element. You never re-render the map.

I think you need to put the map rendering code into the home function of the router as well.

As a side note I noticed you are using setTimeout function. If you are using this so that something renders because it's waiting on something else to load then you should probably get rid of it and listen to an event.

Thanks for your explanation, became clearer to me what to do to solve this. I change my constructor in view `perfil`, so that when route changes only fire once and call the `render` function of `ev.shell` — seal, Dec 29 '14 at 16:48

Backbone: Render view that has been created before

1 Answers1