1

我有一个视图，里面有一个嵌套视图，当渲染时，它上面有一个链接，并附加了一个点击事件。我第一次点击所有链接，一切正常。但是当重新渲染所有视图时，链接事件就会消失。我尝试在重新渲染之前强制delegateEvents（）渲染并删除视图，但没有。

这是我的代码：

var SlideView = Backbone.View.extend({

    tagName: 'li',

    events: {
      'click .nested':'destroy'
    },

    template: _.template($('#slides-nested-template').html()),

    render: function(e){
      var _el = $(this.el);
      _el.html(this.template(this.model.toJSON()));
      this.delegateEvents(this.events);
      return this;
    },

    destroy: function(e){
      e.preventDefault();
      Presentations.eliminate($(e.target).attr('rel'));
    }

});

var SectionView = Backbone.View.extend({

    tagName: 'li',

    template: _.template($('#slides-template').html()),

    events: {
      'click .no-nested':'destroy'
    },

    initialize: function(options){
      this.views = [];
      _.bindAll(this, 'destroy');
    },

    render: function(){
      var _el = $(this.el), self=this;
      _el.html(this.template(this.model.toJSON()));
      _ul = this.$('ul');  

      var data = Presentations.filter(function(slide){
        return slide.get('padre') == self.model.get('id');
      });

      _.each(data, function(slide){
        view = new SlideView({
          model: slide
        });
        self.views.push(view);
        _ul.append(view.render().el);
      });

      this.delegateEvents(this.events);
      return this;
   },

   destroy: function(e){
     e.preventDefault();
     Presentations.eliminate($(e.target).attr('rel'));
   },

   removeViews: function(){
     while (this.views.length){
       var view = this.views.shift();
       view.undelegateEvents();
       view.remove();
       view = null;
    }
  }
});

var SectionList = Backbone.View.extend({

    tagName: 'ul',

    className: 'sortable',

    initialize: function(options){
      Presentations.on('add', this.render, this);
      Presentations.on('reset', this.render, this);
      Presentations.on('remove', this.render, this);
      this.views = [];
    },

    render: function(e){
      //this.removeViews();
      $('#slides .content').empty();

      var data = Presentations.filter(function(slide){
        return slide.get('padre') === false;
      });

      var view, self=this, _el=$(this.el);
      _.each(data, function(slide){
          view = new SectionView({
            model: slide
          });
          _el.append(view.render().el);
          self.views.push(view);
      });

      $('#slides .content').append(_el);
      return this;
   },

   removeViews: function(){
      while (this.views.length){
        var view = this.views.shift();
        view.undelegateEvents();
        view.removeViews();
        view.remove();
        view = null;
      }
   }
});

var Presentation = Backbone.Model.extend({

});

var PresentationList = Backbone.Collection.extend({

  model: Presentation,

  url: BASE_URL+'api/slides/'+PRESENTATION,

  eliminate: function(id){
    this.each(function(slide){
      if (slide.get('padre')==id){
        slide.set('padre', false);
        slide.save();
      }
    });
    var ref = this.get(id);
    ref.destroy();
    this.remove(ref);
  }
});

Presentations = new PresentationList();
SectionListView = new SectionList();
Presentations.fetch();
4

0 回答 0