CODEWITHSUNDEEP
ember.jsmixins
silatham99
silatham99

Reputation: 285

How would one extend multiple mixins when creating a new mixin in Ember.js

I have previously discovered it is possible to extend mixins when creating a new mixin like such:

App.SomeNewMixin = Ember.Mixin.create(App.SomeOldMixin, {
  someMethod: function() { return true; }
});

Now I am attempting to use two existing mixins, but it seems Mixin.create only supports 2 parameters.

App.SomeNewMixin = Ember.Mixin.create(App.SomeOldMixinOne, App.SomeOldMixinTwo, {
  someMethod: function() { // No access to methods defined in SomeOldMixinOne }
});

This seems like a serious limitation of Ember Mixins. The Ember docs have little to no coverage of Ember.Mixin, so I'm not really sure how to proceed. I've tried using Ember.Mixin.apply within the init function of SomeNewMixin, also to no avail.

App.SomeNewMixin = Ember.Mixin.create({
  init: function() {
    this._super();
    this.apply(App.SomeOldMixinOne);
    this.apply(App.SomeOldMixinTwo);
  }

  someMethod: function() { return true; }
});

Any insight on possible solutions would be greatly appreciated!

Upvotes: 6

Views: 6403

Answers (1)

jcbvm
jcbvm

Reputation: 1670

Creating a mixin which extends multiple other mixins should work fine.

For example look at this:

var App = Ember.Application.create();

App.SomeOldMixin = Ember.Mixin.create({
  someOldMethod: function() { return 'old'; },
  someOldMethod2: function() { return 'old2'; }
});

App.SomeNewMixin = Ember.Mixin.create({
  someNewMethod: function() { return 'new'; }
});

App.SomeNewerMixin = Ember.Mixin.create({
  someNewerMethod: function() { return 'newer'; }
});

App.SomeNewestMixin = Ember.Mixin.create(App.SomeOldMixin, App.SomeNewMixin, App.SomeNewerMixin, {
  someOldMethod: function() { 
    return this._super() + ' ' + this.someOldMethod2(); 
  },
  someNewestMethod: function() { return 'newest'; }
});

App.ApplicationController = Ember.Controller.extend(App.SomeNewestMixin, {
  test: function() {
    console.log(this.someOldMethod());
    console.log(this.someNewMethod());
    console.log(this.someNewerMethod());
    console.log(this.someNewestMethod());
  }.on('init')
});

Upvotes: 10

Related Questions