2013-04-07 3 views
5

Можно ли использовать определение Backbone.View.events для прослушивания пользовательских событий подвью?Как использовать определение «Backbone.View.events» для прослушивания пользовательских событий подвью?

определение Детского

Все click событий кэшируются и вызвать мою clicked функции:

var Child = Backbone.View.extend({ 
    events : { 
     'click' : 'clicked' 
    }, 
    clicked: function() { 
     alert('View was clicked'); 
     this.trigger("customEvent"); 
    }, 
    render: function() { 
     this.$el.html("<span>Click me</span>"); 
    } 
}); 

определение Parent

Почему не customEvent событий называют мою action функции?

var Parent = Backbone.View.extend({ 
    events : { 
     'customEvent' : 'action' 
    }, 
    action : function() { 
     alert('My sub view triggered a custom event'); 
    }, 
    render : function() { 
     var child = new Child(); 
     this.$el.append(child.el); 
     child.render(); 
    } 
}); 

Создание и визуализации родительского

var parent = new Parent(); 
parent.$el.appendTo(document.body); 
parent.render(); 

jsfiddle example

Я знаю, что можно использовать вместо listenTo но используя определение событий, кажется чище.

Мое намерение состоит в создании дополнительного представления (например, набора цветов), которое запускает событие после его завершения.

ответ

9

Quick Notes: -

  • В события объекта с точки зрения, мы не должны определять пользовательские события. Для пользовательских событий мы должны сделать привязку. Используйте метод bind() или прослушайте какое-либо событие, используя on().
  • Если ваш элемент sub subview находится внутри вашего родительского представления el, вы можете напрямую прослушивать события в дочернем элементе el, если вы не возвращаете false из обработчика события child. Взгляните на это: Code where parent view is listening event on element onside child view

Если вы хотите использовать только пользовательское событие, Вы можете увидеть здесь Your Updated Fiddle

var Child = Backbone.View.extend({ 
    initialize: function(options) { 
     this.parent = options.parent; 
    }, 
    events : { 
     'click' : 'clicked' 
    }, 
    clicked: function() { 
     alert('View was clicked'); 
     this.parent.trigger("customEvent"); 
    }, 
    render: function() { 
     this.$el.html("<span>Click me</span>"); 
    } 
}); 

var Parent = Backbone.View.extend({ 
    initialize: function() { 
     this.on('customEvent', this.action); 
    }, 
    action : function() { 
     alert('My sub view triggered a custom event'); 
    }, 
    render : function() { 
     var child = new Child({parent: this}); 
     this.$el.append(child.el); 
     child.render(); 
    } 
}); 

var parent = new Parent(); 
parent.$el.appendTo(document.body); 
parent.render(); 
+0

Что вы думаете о 'это $ el.trigger («CustomEvent».) '? – jantimon

+0

Еще раз, ваш элемент el не прослушивает «customEvent», поэтому это тоже не сработает. Правильно ? Посмотрите код JSbin. – sachinjain024

+0

Это действительно работает: http://jsfiddle.net/YLzUJ/2/ – jantimon

Смежные вопросы