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.ControllerMixin public


Uses: Ember.ActionHandler
Defined in: packages/ember-runtime/lib/mixins/controller.js:6
Module: ember

Ember.ControllerMixin provides a standard interface for all classes that compose Ember's controller layer: Ember.Controller, Ember.ArrayController, and Ember.ObjectController.


Methods

send (actionName, context) public

Module: ember

Inherited from Ember.ActionHandler packages/ember-runtime/lib/mixins/action_handler.js:179

actionName
String

The action to trigger

context
*

a context to send with the action

Triggers a named action on the ActionHandler. Any parameters supplied after the actionName string will be passed as arguments to the action target function.

If the ActionHandler has its target property set, actions may bubble to the target. Bubbling happens when an actionName can not be found in the ActionHandler's actions hash or if the action target function returns true.

Example

App.WelcomeRoute = Ember.Route.extend({
  actions: {
    playTheme: function() {
       this.send('playMusic', 'theme.mp3');
    },
    playMusic: function(track) {
      // ...
    }
  }
});

transitionToRoute (name, models, options) public

Module: ember

Defined in packages/ember-routing/lib/ext/controller.js:168

name
String

the name of the route or a URL

models
...Object

the model(s) or identifier(s) to be used while transitioning to the route.

options
Object

optional hash with a queryParams property containing a mapping of query parameters

Transition the application into another route. The route may be either a single route or route path:

aController.transitionToRoute('blogPosts');
aController.transitionToRoute('blogPosts.recentEntries');

Optionally supply a model for the route in question. The model will be serialized into the URL using the serialize hook of the route:

aController.transitionToRoute('blogPost', aPost);

If a literal is passed (such as a number or a string), it will be treated as an identifier instead. In this case, the model hook of the route will be triggered:

aController.transitionToRoute('blogPost', 1);

Multiple models will be applied last to first recursively up the resource tree.

App.Router.map(function() {
  this.resource('blogPost', {path:':blogPostId'}, function() {
    this.resource('blogComment', {path: ':blogCommentId'});
  });
});

aController.transitionToRoute('blogComment', aPost, aComment);
aController.transitionToRoute('blogComment', 1, 13);

It is also possible to pass a URL (a string that starts with a /). This is intended for testing and debugging purposes and should rarely be used in production code.

aController.transitionToRoute('/');
aController.transitionToRoute('/blog/post/1/comment/13');
aController.transitionToRoute('/blog/posts?sort=title');

An options hash with a queryParams property may be provided as the final argument to add query parameters to the destination URL.

aController.transitionToRoute('blogPost', 1, {
  queryParams: {showComments: 'true'}
});

// if you just want to transition the query parameters without changing the route
aController.transitionToRoute({queryParams: {sort: 'date'}});

See also replaceRoute.

Properties

actions public

Module: ember

Inherited from Ember.ActionHandler packages/ember-runtime/lib/mixins/action_handler.js:28

The collection of functions, keyed by name, available on this ActionHandler as action targets.

These functions will be invoked when a matching {{action}} is triggered from within a template and the application's current route is this route.

Actions can also be invoked from other parts of your application via ActionHandler#send.

The actions hash will inherit action handlers from the actions hash defined on extended parent classes or mixins rather than just replace the entire hash, e.g.:

App.CanDisplayBanner = Ember.Mixin.create({
  actions: {
    displayBanner: function(msg) {
      // ...
    }
  }
});

App.WelcomeRoute = Ember.Route.extend(App.CanDisplayBanner, {
  actions: {
    playMusic: function() {
      // ...
    }
  }
});

// `WelcomeRoute`, when active, will be able to respond
// to both actions, since the actions hash is merged rather
// then replaced when extending mixins / parent classes.
this.send('displayBanner');
this.send('playMusic');

Within a Controller, Route, View or Component's action handler, the value of the this context is the Controller, Route, View or Component object:

App.SongRoute = Ember.Route.extend({
  actions: {
    myAction: function() {
      this.controllerFor("song");
      this.transitionTo("other.route");
      ...
    }
  }
});

It is also possible to call this._super.apply(this, arguments) from within an action handler if it overrides a handler defined on a parent class or mixin:

Take for example the following routes:

App.DebugRoute = Ember.Mixin.create({
  actions: {
    debugRouteInformation: function() {
      console.debug("trololo");
    }
  }
});

App.AnnoyingDebugRoute = Ember.Route.extend(App.DebugRoute, {
  actions: {
    debugRouteInformation: function() {
      // also call the debugRouteInformation of mixed in App.DebugRoute
      this._super.apply(this, arguments);

      // show additional annoyance
      window.alert(...);
    }
  }
});

Bubbling

By default, an action will stop bubbling once a handler defined on the actions hash handles it. To continue bubbling the action, you must return true from the handler:

App.Router.map(function() {
  this.resource("album", function() {
    this.route("song");
  });
});

App.AlbumRoute = Ember.Route.extend({
  actions: {
    startPlaying: function() {
    }
  }
});

App.AlbumSongRoute = Ember.Route.extend({
  actions: {
    startPlaying: function() {
      // ...

      if (actionShouldAlsoBeTriggeredOnParentRoute) {
        return true;
      }
    }
  }
});

model public

Module: ember

Defined in packages/ember-runtime/lib/mixins/controller.js:47

The controller's current model. When retrieving or modifying a controller's model, this property should be used instead of the content property.

queryParams public

Module: ember

Defined in packages/ember-routing/lib/ext/controller.js:23

Defines which query parameters the controller accepts. If you give the names ['category','page'] it will bind the values of these query parameters to the variables this.category and this.page

On this page


Methods

  • send
  • transitionToRoute

Properties

  • actions
  • model
  • queryParams
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.