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,{
     objprop: 'This is an Ember object property'
   });
   
   const object = obj.create();

   The extend method present in Ember.Object allows for one or more optional arguments of the Ember.Mixin type. In this example, we added the common mixin to the new Ember.Object object. We then instantiated this Ember object using create.

3. All that's left is to output the contents. Use console.log to display each property:

   console.log(object.get('objprop'));  //This is an Ember object property
   console.log(object.get('property1'));  //This is a mixin property
   console.log(object.get('isEditing'));  //false
   object.edit();  //Starting to edit
   console.log(object.get('isEditing')); //true

   This is what the output will look like. As you can see, we can access any of the mixin properties or methods as if the mixin was included in the Ember object itself. This is a convenient way of reusing code in your applications.

4. Let's create another mixin:

   const secondMixin = Ember.Mixin.create({
     secondProperty: 'This is the second mixin property'
   });

5. Now let's see how this looks if we add it to an Ember object:

   const obj = Ember.Object.extend(common,secondMixin,{
     objprop: 'This is an Ember object Property'
   });

6. Now, we can have access to both the common and secondMixin in our object. We can use console.log to output secondProperty:

   console.log(object.get('secondProperty'));//This is the   second mixin propety

Mixins with the Ember CLI

Mixins work very well with the Ember CLI. To start, use the mixin generator to create one.

1. Make sure that you're in the application directory, and then type the following command:

   $ ember generate mixin common
   installing mixin
    create app/mixins/common.js
   installing mixin-test
    create tests/unit/mixins/common-test.js
   

   The generator command creates an app/mixins folder and the common.js file. The common.js file is where we will put the code for the mixin.

2. We'll use the mixin from the previous example and add it to this file:

   // app/mixins/common.js
   import Ember from 'ember';
   
   export default Ember.Mixin.create({
       property1: 'This is a mixin property',
       edit: function() {
         console.log('Starting to edit');
         this.set('isEditing', true);
       },
       isEditing: false
   });

   This mixin is exactly the same as the previous example; however, now it's in a module that we can import anywhere, including components or controllers.

   For now, we'll import it to our app.js file in the app folders directory.

3. First, we'll need to add the import statement to the top of the file:

   import common from './mixins/common';

   This allows us to use the common mixin anywhere in the app.js file.

4. We'll add the following code to the bottom of the app/app.js file:

   // app/app.js
   
   const obj = Ember.Object.extend(common,{
     objprop: 'This is an Ember object property'
   });
   
   const object = obj.create();
   
   console.log(object.get('objprop'));//This is an Ember object property
   console.log(object.get('property1'));//This is a mixin property
   console.log(object.get('isEditing'));//false
   object.edit();  //Starting to edit
   console.log(object.get('isEditing'));  //true

   As you can see, all the properties and methods in the common mixin are available to the object.

5. If we were to add the common mixin to a component, it might look like following code. Add this code to the common-example.js file:

   // app/components/common-example.js
   import Ember from 'ember';
   import common from '../mixins/common';
   
   export default Ember.Component.extend(common,{
       compprop: 'This is a component property',
       actions: {
         pressed: function(){
           this.edit();
         }
       }
   });

   As always, we must first import the mixin to our component. The path is always relative to the directory you're in, therefore, we must use ../mixins/common to find it.

   In the component, I added a simple action called pressed that triggers the mixin edit method. If the action gets triggered, we would see the Starting to edit message in the console. Look for more examples of components in Chapter 6, Ember Components.

How it works...

The Ember.Mixin class allows the creation of mixins whose properties and methods can be added to other classes. They can't be instantiated but they can be added or mixed in.

A mixin in computer science is a class that lends or copies it's behavior to a borrowing class using composition instead of inheritance. It encourages code reuse and avoids ambiguity that multiple inheritance can cause.