Events not firing with Marionette

1
votes

I'm creating a simple page using a CompositeView from Marionette, with a parent lodash template that wraps a group of templates: one for each item in its Collection.

The page displays properly, and each ItemView renders properly with it's own child template, but binding a 'click' event fails to register anywhere in the application, even if moved into the CompositeView.

I have my suspicions that this is happening due to the events being bound before the element is created, and it not updating afterwards. From what I have read, it uses / used .live() / .on(), but I can't see any other reason that it wouldn't register.

Is there a way to make sure that events are rebound with onRender()? Am I doing something else wrong entirely?

Environment: RequireJS, BabelJS (es6), Backbone 1.1.2, Marionette 2.4.1, jQuery 1.10.2

I've created a gist of the code in question.

1
backbone.jsmarionetteecmascript-6
Please trim down the code to a small demonstration and put it in the question. As long as you indent it 4 spaces, SO will do syntax highlighting. Linking to code elsewhere makes it much less likely people are going to answer. – loganfsmyth

1 Answers

3
votes

Non ES6: Try assigning this.events before the parent constructor call, in Backbone 1.2.1+ the events are created BEFORE initialize in the parent constructor. In 1.1.2 they are created AFTER initialize, but still as the last thing the parent constructor does - so you should either assign them in initialize, or do it before the super call (I recommend before super call in the constructor so that if you upgrade it doesn't break again).

In ES6 you can't use this before the super call.

You could call this.delegateEvents(); again, but it's not ideal as it stops listening and then re-listening to any existing events which is less efficient (though the impact is probably negligible).

You can use es7's static property on the class definition if you are using a transpiler that supports it (e.g. Babel), or make events a function which returns an object if you need it to be dynamic.