Backbone View Events Not Firing, EL exists - backbone.js

Question

I've been through similar discussions and still had no clue why my events are not firing. It seems I lack some fundamental understanding about how backbone events work.
Here is my code:
(function() {
MP.IndicatorView = Backbone.View.extend({
template: JST['backbone/templates/indicator'],
className: 'row indicator',
initialize: function() {
console.log(this);
console.log(this.el);
_.bindAll(this, 'collapse');
},
events: {
"click .control" : "collapse"
},
collapse: function (e) {
console.log('shit');
var $el = $( e.target );
$el.toggleClass( 'expand' );
var $panelToPoke = $el.
parents( '.top-container' ).
siblings( '.bottom-container' )
, $parentPanel = $panelToPoke.parents('.indicator')
, isVisible = $panelToPoke.is( ':visible' );
$parentPanel.toggleClass( 'expanded' );
isVisible ? $panelToPoke.slideUp() : $panelToPoke.slideDown();
},
render: function () {
// Don't show offers that have no transactions
if (this.model.get('transactionCount') > 0) {
this.$el.html( this.template(this.model.for_template()) );
}
return this.$el;
}
});
MP.IndicatorsView = Backbone.View.extend({
el: '#indicators',
render: function () {
var view;
var subViews = this.collection.reduce(function ( memo, indicator ) {
view = new MP.IndicatorView({ model: indicator });
memo += view.render().html();
return memo
}, '');
this.$el.html( subViews );
return this;
}
});
})();
How views are instantiated:
var indicators = new MP.Indicators( coordinator.dump() );
var indicatorsView = new MP.IndicatorsView({ collection: indicators });
indicatorsView.render();
Template:
Views:
<div class="row indicator">
<div class='top-container'>
<ul class="inline-list mainpanel">
<li>
<div class='control expand'></div></li>
<li class="state <%= is_active ? 'active' : 'expired' %>"></li>

Answer 1

Here is a working solution http://jsfiddle.net/hcKv2/
The main problem was that you are used .html() instead of backbone view element .$el inside of your indicatorsView.render() method.
You need to return this inside of render methods to achieve chain pattern, but it is not necessary it is ok if you are returning $el in child view.
render: function () {
var view;
var subViews = this.collection.reduce(function ( memo, indicator ) {
view = new MP.IndicatorView({ model: indicator });
//memo += view.render().html();
this.$el.append( view.render() );
// or this.$el.append( view.render().$el );
// if you return this inside render method
return memo
}, '');
//this.$el.html( subViews );
return this;
}
Have a good coding.

Answer 2

some reference to furthur explain why:
http://ianstormtaylor.com/rendering-views-in-backbonejs-isnt-always-simple/