javascript - 渲染 View 后主干事件未触发

Question

我有一个正在路由器中渲染的 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;
    }

这就是我在路由器中渲染 View 的方式:

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

Answer 1

代码中的

this.template() 仅返回 HTML 字符串，从而导致问题。

所以你应该尝试附加具有HTML字符串和事件绑定(bind)的 View 的el元素

现在在您的 View 中将 HTML 分配给 el

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

在您的路由器中

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