Mixin

Ember.Mixin Class

PUBLIC

Defined in: packages/ember-metal/lib/mixin.js:401

Module: ember-metal

The Ember.Mixin class allows you to create mixins, whose properties can be added to other classes. For instance,

App.Editable = Ember.Mixin.create({
  edit: function() {
    console.log('starting to edit');
    this.set('isEditing', true);
  },
  isEditing: false
});
 
// Mix mixins into classes by passing them as the first arguments to
// .extend.
App.CommentView = Ember.View.extend(App.Editable, {
  template: Ember.Handlebars.compile('{{#if view.isEditing}}...{{else}}...{{/if}}')
});
 
commentView = App.CommentView.create();
commentView.edit(); // outputs 'starting to edit'

Note that Mixins are created with Ember.Mixin.create, not Ember.Mixin.extend.

Note that mixins extend a constructor's prototype so arrays and object literals defined as properties will be shared amongst objects that implement the mixin. If you want to define a property in a mixin that is not shared, you can define it either as a computed property or have it be created on initialization of the object.

//filters array will be shared amongst any object implementing mixin
App.Filterable = Ember.Mixin.create({
  filters: Ember.A()
});
 
//filters will be a separate  array for every object implementing the mixin
App.Filterable = Ember.Mixin.create({
  filters: Ember.computed(function() {return Ember.A();})
});
 
//filters will be created as a separate array during the object's initialization
App.Filterable = Ember.Mixin.create({
  init: function() {
    this._super(...arguments);
    this.set("filters", Ember.A());
  }
});

Links:

http://emberjs.com/api/classes/Ember.Mixin.html

doc_EmberJs

2025-01-10 15:47:30

Comments