CODEWITHSUNDEEP
javascriptjquerybackbone.js
pedrum golriz
pedrum golriz

Reputation: 512

Backbone events not firing after rendered view

I have a view being rendered in the router, but after it's rendered none of the events will fire. The following is my view:

function(Global, util, user, userMenu) { 
        /*userMenu is the template*/
        var UserMenuView = Backbone.View.extend({
            initialize: function() {
                this.template = _.template(userMenu);
            },
            render: function() {
                var container = $(this.el);
                container.empty().append(this.template());
                return container;
            },
            events: {
                "tap #about-user-menu" : "launchAbout",
                "keydown #about-user-menu": function(e) { if (e.which === 13) this.launchAbout(e); },
                "tap #help-user-menu" : "launchHelp",
                "keydown #help-user-menu": function(e) { if (e.which === 13) this.launchHelp(e); },
                "tap #resources-user-menu" : "launchResources",
                "keydown #resources-user-menu": function(e) { if (e.which === 13) this.launchResources(e); },
            },
            launchAbout: function(e){
                e.preventDefault();
                alert("about");
            },
            launchHelp: function(e){
                e.preventDefault();
                alert("help");
            },
            launchResources: function(e){
                e.preventDefault();
                alert("resources");
            }
        });
        return UserMenuView;
    }

This is how I am rendering the view in the router:

showUserMenu: function(){
    var userMenu = new UserMenuView();
    userMenu.render();
}

Upvotes: 1

Views: 499

Answers (1)

StateLess
StateLess

Reputation: 5402

this.template() in your code returns just a HTML string, causing the problem.

so you should try to append el element of view which has HTMLstring and also Event bindings

now in your view assign HTML to el 

render: function() {
           this.$el.html(this.template());
           return this;
          }

in your router

$('#menu').append(UserMenuView.render().el);

Upvotes: 1

Related Questions