home
  • Blog
2.9
  • Getting Started
  • Tutorial
  • The Object Model
  • Routing
  • Templates
  • Components
  • Controllers
    • Introduction
  • Models
  • Application Concerns
  • Testing
  • Ember Inspector
  • Addons and Dependencies
  • Configuring Ember.js
  • Contributing to Ember.js
  • Glossary
Old Guides - You are viewing the guides for Ember v2.9.0.
Go to v5.0.0

Introduction

Edit pencil

Controllers

Controllers behave like a specialized type of Component that is rendered by the router when entering a Route.

The controller receives a single property from the Route – model – which is the return value of the Route's model() method.

To define a Controller, run:

ember generate controller my-controller-name

The value of my-controller-name must match the name of the Route that renders it. So a Route named blog-post would have a matching Controller named blog-post.

You only need to generate a Controller if you want to customize its properties or provide any actions. If you have no customizations, Ember will provide a Controller instance for you at run time.

Let's explore these concepts using an example of a route displaying a blog post. Presume a BlogPost model that is presented in a blog-post template.

The BlogPost model would have properties like:

  • title
  • intro
  • body
  • author

Your template would bind to these properties in the blog-post template:

app/templates/blog-post.hbs
<h1>{{model.title}}</h1>
<h2>by {{model.author}}</h2>

<div class="intro">
  {{model.intro}}
</div>
<hr>
<div class="body">
  {{model.body}}
</div>

In this simple example, we don't have any display-specific properties or actions just yet. For now, our controller's model property acts as a pass-through (or "proxy") for the model properties. (Remember that a controller gets the model it represents from its route handler.)

Let's say we wanted to add a feature that would allow the user to toggle the display of the body section. To implement this, we would first modify our template to show the body only if the value of a new isExpanded property is true.

app/templates/blog-post.hbs
<h1>{{model.title}}</h1>
<h2>by {{model.author}}</h2>

<div class='intro'>
  {{model.intro}}
</div>
<hr>

{{#if isExpanded}}
  <button {{action "toggleBody"}}>Hide Body</button>
  <div class="body">
    {{model.body}}
  </div>
{{else}}
  <button {{action "toggleBody"}}>Show Body</button>
{{/if}}

You can then define what the action does within the actions hook of the controller, as you would with a component:

app/controllers/blog-post.js
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    toggleBody() {
      this.toggleProperty('isExpanded');
    }
  }
});
left arrow
Triggering Changes with Actions
We've finished covering Controllers. Next up: Models - Introduction
right arrow
On this page

  • Controllers
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 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue