Multiple Mixins with same events in Ember.js

Question

I would like to include multiple mixins within a view in Ember.js and more than one of the mixins and/or the view uses a same event (e.g. willInsertElement). I'm running Ember 1.4.0-beta.5.

I understand that the event in each mixin will be overridden by the view. However, I have read that it is possible to use the same event hook in the mixin and view, or multiple mixins included in the same view, by calling this._super(); at the start of the mixin's aforementioned event method. However, I have not been able to successfully make this happen. My question is, thus, how can I write logic within the same event hook in a view and mixin (or multiple mixins included in the same view) so that all the logic within each occurrence of the event hook will be called.

Here is an example:

App.StatsView = Em.View.extend(
    App.DateFormatting, {

    willInsertElement: function() {
        // Some view-specific logic I want to call here
    },
});

App.DateFormatting = Em.Mixin.create({

    willInsertElement: function() {
        this._super(); // This doesn't work.
        // Some mixin logic I want to call here
    },
});

N.B. One approach here might be to not use a mixin and extend a view instead (because willInsertElement is specific to Em.View), but that isn't maintainable in our apps.

Answer 1

If the different functions you're using are not dependent on each other, it's the best solution to not override the willInsertElement hook, but to tell the function to be raised when the event/hook gets called.

Like:

App.StatsView = Em.View.extend(App.DateFormatting, {
  someSpecificFunction: function () {
    console.log('beer me');
  }.on('willInsertElement')
});

App.DateFormatting = Em.Mixin.create({
  dateFormattingFunction: function () {
    console.log('beer you');
  }.on('willInsertElement')
});