home
  • Blog
  • Home
  • Projects
    • Ember
    • EmberData
    • Ember CLI
1.13
  • Packages
    • ember
    • ember-application
    • ember-debug
    • ember-extension-support
    • ember-htmlbars
    • ember-metal
    • ember-routing
    • ember-routing-htmlbars
    • ember-routing-views
    • ember-runtime
    • ember-templates
    • ember-testing
    • ember-views
  • Namespaces
    • Ember
    • Ember.FEATURES
    • Ember.String
    • Ember.computed
    • Ember.inject
    • Ember.run
  • Classes
    • Ember.Application
    • Ember.Array
    • Ember.ArrayProxy
    • Ember.Binding
    • Ember.Checkbox
    • Ember.Component
    • Ember.ComputedProperty
    • Ember.ContainerDebugAdapter
    • Ember.Controller
    • Ember.ControllerMixin
    • Ember.CoreObject
    • Ember.DataAdapter
    • Ember.DefaultResolver
    • Ember.Error
    • Ember.Evented
    • Ember.Helper
    • Ember.InstrumentationSupport
    • Ember.Logger
    • Ember.Mixin
    • Ember.MutableArray
    • Ember.MutableEnumerable
    • Ember.Namespace
    • Ember.NativeArray
    • Ember.Object
    • Ember.Observable
    • Ember.PromiseProxyMixin
    • Ember.Route
    • Ember.Router
    • Ember.Service
    • Ember.Test
    • Ember.Test.Adapter
    • Ember.Test.QUnitAdapter
    • Ember.TextArea
    • Ember.TextField
    • Ember.VisibilitySupport
    • RSVP.EventTarget
    • RSVP.Promise

Class Ember.Mixin public


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

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.apply(this, arguments);
    this.set("filters", Ember.A());
  }
});


Methods

create (arguments) public

Module: ember

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

arguments
On this page


Methods

  • create
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2025 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue Created with Sketch.