EmberScreencasts

Mixins

Using Mixins

export default Ember.Controller.extend(Ember.SortableMixin, {

})

Creating Mixins

var CapitalismMixin = Ember.Mixin.extend({
    values: 'money'
});

export default Ember.Controller.extend(CapitalismMixin, {

})

Inheriting from Mixins

var Aristocrat = Ember.Object.extend({
    hat: 'blue',
    values: 'status'
})

var CapitalismMixin = Ember.Mixin.extend({
    values: 'money'
})

var Merchant = Aristocrat.extend(CapitalismMixin, {
   //hat will be 'blue'
   //values will be 'money'
})

Multiple Inheritance

var Aristocrat = Ember.Object.extend({
    hat: 'blue',
    values: 'status'
})

var CapitalismMixin = Ember.Mixin.extend({
    values: 'money'
})

var FreedomMixin = Ember.Mixin.extend({
    hat: 'red, white, and blue'
})

var American = Aristocrat.extend(CapitalismMixin, FreedomMixin, {
   //hat will be 'red, white, and blue'
   //values will be 'money'
})

Review

• .extend(MixinGoesHere, {})
• Ember.Mixin.extend({})
• Mixin Inheritance
• Mixin Multiple Inheritance

• Concatenated vs Merged Properties