Emberjs Tutorial: Understanding basic Controllers and Events

7 Mins


ember app folder structure

Previously we’ve discussed about few things you need to know before starting ember; followed by ‘my first ember app’. Now the next thing which we’re going to cover is the basic controllers and events which will help you to make your app live.

While discussing, we will use the same app structure which we used in “My first ember app”.

What are controllers?

Controllers are the parts of your app, where you will design your logic. Model represents only data and handlebar templates are logic less. So controller is the main thing which makes your app LIVE.

The templates or views know about the controllers and controllers have knowledge about the models. But the vice versa is not true. That means, the models can’t say which controllers are reading or making any changes to them. Neither the controllers know which templates /views are using them to display their properties. So when you set a property in your template, suppose it is {{query}}; it automatically means {{controller.query}}. And if you write {{model.query}} in means the ‘query’ property of the model which is assigned to the controller; similar to {{controller.model.query}}.

Defining controllers with property and action

To define a controller, you must extend any of the ember’s controller classes. Below we’ve extended the Em.Controller class. There are few more controller classes also which we will discuss in the last section of this article.

AppName.ApplicationController = Em.Controller.extend({
  Property1: true,
  property2: “a string”,
  property3: 123,

  demoFunction: function(){
  // do something

  actions: {
    myActionFunc: function() {
      alert(“action has been completed”);

As you can see, to make a controller you have to extend the ‘Em.Controller’ class (There are few other controller classes too. ArrayController and ObjectController). Then inside your controller you can define your own properties and can initialize them with different values; string, Boolean, number or whatever. You can define a function similarly (as ‘demoFunction’). But if you want to make a function which you will use as an action of an event in your template, you should define it inside the ‘action’ object of your controller. Otherwise it will through exceptions and warnings (check your browser console), though the end user won’t face much problem.

Using controller properties in Template

You just have to write the property name in double curly braces in your template, and it will automatically reflect the value when you will run the file in the browser. Few examples:

{{input type="text" value=property3}}

You also can assign action to different elements for various events. Here are few examples:

<button {{action ‘myActionFunc’ on=’click’}}>Button Name</button>
<button {{action ‘myActionFunc’ on=’click mouseEnter mouseLeave’}}>Button Name</button>

Instead of click event, you can bind the action to some other events also; like mouseLeave, mouseEnter etc. Or if you want you can bind the same action for multiple events. But different actions for different events in not allowed in templates. You can do it by making a view object or there are few tricky ways too.

An example / demo

We’ve made a very simple show hide button to show and hide the contents of model alternatively.


HelloEmber.ApplicationController = Em.Controller.extend({
  isShown: true,

  actions: {
    showhide: function() {

Initially isShown property is set to true. And inside action object, we’ve defined a function named ‘showhide’. Each time this function is called, the value of isShown will be toggled.


<button {{action 'showhide' on='click'}}>
 {{#if isShown}} Hide
 {{else}} Show
 <br /><br />
 {{#if isShown}}
	 Now it's displaying the model contents...<br />
	 {{#each item in model}}
 	Everything is hidden now.

Action ‘showhide’ is bind to the button event ‘click’; and button name is either ‘Show’ or ‘Hide’ according to the value of the controller’s property ‘isShown’.

Same if else logic is used to design the content displaying part of the template. And to show model data we’ve discussed in my first ember app.

live-demo-button download-button

Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.