Events in mixin not working with backbone >= 1.2

[fbossy]

If you extend a View with a mixin that has an events hash, these events are not apply to the element.

[mrjoelkemp]

Hi! Thanks for reporting! Can you provide a code sample/example to clarify the problem? Thanks in advance!

[fbossy]

Hi !

You can see the problem when you run example/SpecRunner.html

I use Cocktail on a project where I extend instances of a View in initalize, depending on the subtype of that View.
Basically :

if ( this.model.get( 'type' ) === 'video' ) {
     Cocktail.mixin( this, SlideVideoMixin );
}

When I upgrade Backbone to any version greater or equal to 1.2.0, events defined in the mixin are not applied to the elements in the view.

I looked into it after I posted that issue, and found a workaround.

I think Backbone changed the View constructor, at least the way it delegates events.
So, I'm now re-delegating events after applying the mixin. Solved the problem, in my case.

if ( this.model.get( 'type' ) === 'video' ) {
     Cocktail.mixin( this, SlideVideoMixin );
     this.delegateEvents();
}

Is it the correct way to fix it ?

[mrjoelkemp]

Thanks for the details.

The tests are passing against Backbone 1.3.3:

cocktail/externals/backbone.js

Line 1 in dac954a

// Backbone.js 1.3.3

.

Is it possible for you to supply a failing test case to confirm that there's a bug with Cocktail? Any help is appreciated.

I haven't used Backbone in 3 years, so I could use some help pushing this issue through to resolution.

Thanks in advance!

[fbossy]

Hi!

Just try to run cocktail/example/SpecRunner.html
https://github.com/onsi/cocktail/blob/dac954a5297d5189f2d4907e6f6f955e708d2dc3/example/SpecRunner.html
You'll see it fails 1 spec :

MyPaginatedViewAlt [Pagination] clicking between pages should allow the user to go to the next/previous page and hide/show the next/previous buttons appropriately.

These events are defined in PaginateMixin.

Adding this.delegateEvents(); in PaginateMixin's render solves it.

Backbone.View constructor change I was referring to :
https://github.com/jashkenas/backbone/blob/1.1.2/backbone.js#L996
vs
https://github.com/jashkenas/backbone/blob/1.3.3/backbone.js#L1220

Hope this helps!