Backbone Layoutmanager DelegateEvents на подпредставлении не работает
У меня есть следующее:
Views.Parent = Backbone.View.extend( {
template: "parent",
initialize: function( ) {
this.render( );
},
beforeRender: function( ) {
this.setView( ".foo", new Views.Child( {
model: this.model
} );
},
afterRender: function( ) {
this.$el.html( Handlebars.compile( this.$el.html( ) ).call( this, this.model.attributes ) );
var foo = this.getView( ".foo" );
foo.delegateEvents( );
}
} );
Views.Child = Backbone.View.extend( {
template: "child",
events: {
"click input": "inputClick"
},
initialize: function( ) {
this.listenTo( this.model, "change", this.render );
},
inputClick: function( ) {
console.info( "Input Clicked" );
},
afterRender: function( ) {
this.$el.html( Handlebars.compile( this.$el.html( ) ).call( this, this.model.attributes ) );
var foo = this.getView( ".foo" );
foo.delegateEvents( );
}
} );
События в Views.Child
не стреляют. Представление определенно найдено, и foo.events возвращает правильные события. Я пробовал несколько способов вставки своего подвида, DelegateEvents просто не делает этого.
Кто-нибудь еще сталкивался с этим и может предложить какое-нибудь понимание?
Я должен упомянуть, что я использую и свойство events, и this.listenTo во вложенном представлении. Никто из них не уволен.
Редактировать: родительский элемент добавляется в другое представление как таковое:this.$el.append( parentView.$el );
куда parentView
является экземпляром объекта Views.Parent
,
1 ответ
Когда ты звонишь this.$el.html
в afterRender
Вы перезаписываете текущий вид HTML (и все связанные события / дочерний вид). Как так, вы удаляете дочерний вид, который вы установили в beforeRender
,
Вот почему у вас нет событий, разжигающих.
Я хотел бы дать больше информации о том, как вы должны организовать свой код... Но я не могу понять, что вы пытаетесь сделать в afterRender
это не имеет никакого смысла вообще. Скомпилируйте весь код вашего шаблона внутри fetch
а также render
Варианты конфигурации, не в afterRender
,
Быстрая заметка: beforeRender
: где вы устанавливаете дочерние представления afterRender
: где вы привязываете события или запускаете jQuery плагины и т. д. Вы не должны касаться DOM здесь.