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，并且事件绑定到按钮将触发多次，如何让按钮点亮一次。

Answer 1

你有内存泄漏和僵尸视图对象

骨干视图中的

events的范围限定为指定（或为您生成）的el。由于您已将el指定为body，因此click #sendDm事件将查找ID为sendDm的元素的任何实例。

当您更改网址中的路由时，路由器正在接收更改并加载视图...但旧视图永远不会被正确关闭或删除，因此您将留下一个僵尸视图对象在内存中，绑定到#sendDm元素的click事件。每次你移动到一个新的路线并加载另一个视图时，你将留下另一个僵尸形式，绑定到该元素。

不要将body指定为el。另外 - 不要从视图的初始化方法中调用this.render()。相反，让你的路由器处理body的知识并让它渲染视图，同时删除旧视图：

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;
  }
});

在我多次查看多次后，骨干将多事件绑定到一个按钮

1 个答案: