Ember.js Cookbook

Using mixins

Mixins are a great way of reusing and sharing code in Ember. The following recipes go over some basic operations on how to use them in your code.

How to do it...

In this recipe, we'll create a common mixin object.

1. Create an Ember mixin object that has a couple of properties and a function:

   const common = Ember.Mixin.create({
       property1: 'This is a mixin property',
       edit: function() {
         console.log('Starting to edit');
         this.set('isEditing', true);
       },
       isEditing: false
   });

   This mixin can be added to any object. For the sake of simplicity, all this mixin does is display some text and set the isEditing property to true if the edit function is invoked.

2. Let's see what it looks like when we add this object to an object:

   const obj = Ember.Object.extend(common,{ ...