backbone.js - 多次新建 View 后主干将多个事件绑定(bind)到一个按钮

Question

var UserView = Backbone.View.extend({
        initialize: function(){
            MData.blankHeader.data.topBar.title = '<h1 id="titleLogo">' + this.options.userName + '</h1>';
            MData.blankHeader.data.topBar.btn1 = '';
            MData.blankHeader.data.topBar.btn2 = '<a href="#" id="sendDm" class="cu-round-btn">发私信</a>';
            $('header').html(Mustache.to_html($('#headerTpl').html(), MData.blankHeader)).append('<div class="topbar-shadow"></div>'); 
            $('footer').html(Mustache.to_html($('#footerTpl').html(), MData.eventlistFooter)).attr('id','').find('.selected').removeClass('selected').end().find('.footer-item:eq(3)').addClass('selected');
            $('#content').css({"top": $('header').height() + 'px'});
            setTimeout(function(){
                scrollinit(); 
            },0);
            onScrollEnd = true;//??
            this.render();
        },

        events:{
            "click #sendDm" : "sendDm"
        },

        el: $('body'),

        sendDm: function(e){
            alert('send dm');
            e.preventDefault();
        },

        render: function(){
            var html = "";
            html += Mustache.to_html($("#userTpl").html(), this.options.userData);
            $('#pullDown').css("display","none");
            $('#ajaxEvent').html(html);
            console.log(this.options.userId);
            if(this.options.userName != "me"){
                $('#dm').remove();
            }
            calTime();
            function calTime(){
                _.each($('.user-timeStamp'), function(date){
                    $(date).html(humaneDate(date.innerHTML));
                });
            }
            setInterval(calTime,60000)
            return this;
        }
    });   



//code in Router
    var newUser = new UserCol();//new a Collection
                    newUser.fetch({
                        data: param,
                        success: function(model,data){
                            new UserView({userData: data, userId: param})
                        }
                    })

因此，当我多次查看此页面(更改地址栏中的参数)时，主干将多次新建 UserView，并且绑定(bind)到按钮的事件将多次触发，
我怎样才能让按钮只触发一次。

Answer 1

你有内存泄漏和僵尸 View 对象
events在主干 View 中，范围为 el指定(或为您生成)。因为您已指定 el如body , click #sendDm事件将查找 ID 为 sendDm 的元素的任何实例.

当您更改 url 中的路由时，路由器会接收更改并加载 View ...但是旧 View 永远不会被正确关闭或删除，因此您会在内存中留下一个僵尸 View 对象，绑定(bind)到 #sendDm 的点击事件元素。每次您移动到新路线并加载另一个 View 时，您都会留下另一个绑定(bind)到该元素的僵尸表单。

不指定 body作为您的el .还有-不要打电话this.render()从您的 View 的初始化方法。相反，让您的路由器处理 body 的知识并让它渲染 View ，同时删除旧 View :

var newUser = new UserCol();//new a Collection

MyRouter = Backbone.Router.extend({
  routes: {"some/route/:id": "showIt"},

  initialize: function(){
    _.bindAll(this, "showUser");
  }

  showIt: function(id){
    newUser.fetch({
      data: param,
      success: this.showUser
    });
  },

  showUser: function(model,data){
    if (this.userView){
      this.userView.unbind();
      this.userView.remove();
    }
    var view = new UserView({userData: data, userId: param});
    view.render();
    $('body').html(view.el);
    this.userView = view;
  }
});