Undelegate просмотреть события при нажатии кнопки браузера

Question

Не могли бы вы объяснить, как удалить события, чтобы предотвратить запуск дублирования при нажатии кнопки «Назад назад». Или есть способ отключить события, когда снова заработает представление. На самом деле застрял, как с этим бороться. Нажатие кнопки «Назад», а затем назад снова вызывает многократное срабатывание событий. Например, при сохранении данных формы модели. Спасибо.

var App = {}; 

// extending models, collections etc. 

App.SamplesCollectionView = Backbone.View.extend({ 

    el: '#samples', 
    template: _.template($('#sample-edit-template').html()), 
    events: { 
     'click a.sample-item': 'onEdit' 
    }, 
    render: function(){ 
     this.$el.append(this.template()); 
     var $sample_list = this.$el.find('ul#sample-list'); 
     this.collection.each(function(sample) { 
      var rendered = new App.CategoryView({model: sample}).render().el; 
      $sample_list.append(rendered); 
     }); 
    }, 

    onEdit: function(e) { 
     this.undelegateEvents(); 
     // go to edit view 
     Backbone.history.navigate(e.target.getAttribute('href'), {trigger: true}); 
     return false; 
    } 

}); 

App.SampleEditView = Backbone.View.extend({ 

    el: '#samples', 
    template: _.template($('#sample-edit-template').html()), 
    events: { 
     'click button.save': 'onSave', 
     'click button.cancel': 'onCancel', 
    }, 

    render: function() { 
     this.$el.append(this.template(this.model.toJSON())); 
     return this; 
    }, 

    onSave: function() { 
     this.undelegateEvents(); 
     var data = Helpers.getFormData(this.$el.find('form')); 
     this.model.save(data); 
     // go back to index view 
     Backbone.history.navigate('/samples', {trigger: true}); 
     return false; 
    } 

}); 

App.SamplesRouter = Backbone.Router.extend({ 
    routes: { 
     'samples': 'index', 
     'samples/edit/:id': 'edit' 
    }, 

    index: function() { 
     App.samples = new App.SamplesCollection; 
     App.samplessView = new App.SamplesCollectionView({collection: App.samples}); 
    }, 

    edit: function(id) { 
     App.sampleEdit = new App.SampleEdit({id: id}); 
     App.sampleEditView = new App.SampleEditView({model: App.sampleEdit}) 
    } 

}); 

App.samplesRouter = new App.SamplesRouter; 

Backbone.history.start({pushState: true, hashChange: false}); 

Answer 1

Проблема в том, что у вас есть много видов, указывающих на один и тот же элемент #samples. Вы не можете удалить один вид, потому что если вы вызываете view.remove(), ваш другой элемент представления исчез.
И до тех пор, пока этот элемент не существует в DOM, вид, который, как вы думали, исчезнет, ​​будет существовать в памяти, поскольку совместно используемый элемент имеет обработчики событий, ссылающиеся на экземпляр представления.

Если вы хотите делегировать функции отображения и редактировать функциональные возможности одного элемента, сделайте это в том же виде, используя что-то вроде методов show/hide, не создавая новый экземпляр представления.

В противном случае они должны иметь свои собственные элементы, у вас не должно быть двух экземпляров представления, указывающих на один и тот же элемент. При переключении на другое представление убедитесь, что вы вызываете его методом remove(), который удаляет элемент из DOM и вызывает undelegateEvents, чтобы он правильно собирал мусор.