Обработчик обработчика магистралей не работает

Question

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

Вот вид макета:

var LayoutView = Backbone.View.extend({ 
    el: "#layout", 
    render: function (view) { 
     this.child = view; 
     if (this.child) { 
      this.child.remove(); 
     } 
     this.$el.html(this.child.render().el); 
     return this; 
    } 
}); 

и вот моя точка зрения формы:

var ResumeForm = Backbone.View.extend({ 
    events: { 
     'click #create': 'createResume' 
    }, 
    initialize: function() { 
     this.template = _.template($('#new-resume').html()); 
    }, 
    render: function() { 
     this.$el.html(this.template()); 
     return this; 
    }, 
    createResume: function() { 
     // getting values from template inputs and saving them to model 
     var resume = new Resume({ 
      profession: $('#profession').val(), 
      firstName: $('#firstname').val(), 
      lastName: $('#lastname').val() 
     }); 
     // saving a new model to collection instance 
     resumes.add(resume); 
     resume.save(null, { 
      success: function (res) { 
       console.log("POST resume id " + res.toJSON().id); 
      }, 
      error: function() { 
       console.log("Failed to POST"); 
      } 
     }); 
    } 
}); 

мой взгляд форма делает в моем макете отлично, но когда я ввожу значение и нажмите #create кнопку, ничего не происходит - не сохраняет модель и не регистрирует ошибку ошибки из моего метода createResume. Я подозреваю, что при визуализации представления формы в макете линия this.$el.html(this.child.render().el); просто уничтожает все прослушиватели событий, потому что, если я добавлю эти слушатели в макет, это сработает.

Есть ли способы устранить эту проблему?

Answer 1

Магистральный вид remove Функция undelegates событий, связанных с el.

От annotated source:

remove: function() { 
    this._removeElement(); 
    this.stopListening(); 
    return this; 
}, 

_removeElement: function() { 
    this.$el.remove(); 
}, 

Это связано с JQuery .remove() функции (курсив мой):

Similar to .empty() , the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

Если вы звоните remove перед повторным использованием мнение, вам нужно вручную вызвать this.delegateEvents(), чтобы повторно связать события с байтом events и переустановить любое событие, которое просмотр прослушивал через this.listenTo(...).

Но самый лучший способ повторного использования точки зрения, без вызова remove который вызывает stopListening, вы можете использовать setElement которые undelegates события, а также изменить вид элемента пройденному элемента, а затем вновь делегирует события.

setElement: function(element) { 
    this.undelegateEvents(); 
    this._setElement(element); 
    this.delegateEvents(); 
    return this; 
}, 

Ваш LayoutView стал бы что-то вроде этого:

var LayoutView = Backbone.View.extend({ 
    el: "#layout", 
    render: function(view) { 
     // if the view is different, make sure to undelegate the old view. 
     if (this.child && this.child !== view) this.child.undelegateEvents(); 
     this.child = view; 
     this.child.setElement(this.$el).render(); 
     return this; 
    } 
});