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.
In this recipe, we'll create a common mixin object.
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.
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
.
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.
const secondMixin = Ember.Mixin.create({ secondProperty: 'This is the second mixin property' });
const obj = Ember.Object.extend(common,secondMixin,{ objprop: 'This is an Ember object Property' });
secondMixin
in our object. We can use console.log
to output secondProperty
:console.log(object.get('secondProperty'));//This is the second mixin propety
Mixins work very well with the Ember CLI. To start, use the mixin generator to create one.
$ 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.
// 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.
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.
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.
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.
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.