One advantage of a controller is storing properties. Controllers have properties that are stored in the application, which is unlike the model where properties are saved to the server. In this recipe, we'll take a look at a few different types of properties and how they can be displayed in a template.
$ ember g controller application
In this application, we'll be using the application controller
to store all our properties.
// app/controllers/application.js import Ember from 'ember'; export default Ember.Controller.extend({ prop2: 'test', prop3: true, actions: { enter(val){ alert(this.get('prop1')); alert(this.getProperties('prop1','prop2').prop1); alert(val); this.toggleProperty('prop3'); } } });
This controller has two properties. The first property contains a string. The second has a Boolean value of true
attached to it. The enter
action displays a few alert boxes. Let's take a closer look at the enter
action:
alert(this.get('prop1')); alert(this.getProperties('prop1','prop2').prop1); alert(val); this.toggleProperty('prop3');
When accessing properties in Ember, always use this.get
and this.set
. This guarantees that the property will be read or set correctly in Ember. In addition, we can use this.getProperties
. This allows us to get multiple properties at once. It returns an object of those properties and their values.
Another useful method is toggleProperty
. This will take a Boolean value and toggle it. In other words, a value of false
will become true
and vice versa.
Be aware that you don't have to declare each property in the controller definition. Properties can be retrieved directly from the template and be manipulated. In the preceding example, the prop1
property is retrieved from the template. It was never defined in the controller. If needed, you can set default property values.
// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> {{outlet}} <input type='text' value={{prop1}}>One way input<br> Property 1:{{prop1}}<br> Property 2:{{prop2}}<br> {{input type='text' value=prop1}}Two way input helper<br> <button {{action 'enter' prop1}}>Value of prop1</button><br> Propert 3:{{prop3}}
The prop1
property is bound to the bracket input and input
helper. By default, bracket input tags are one-way. What this means is that the prop1
property is retrieved from the controller when the template is rendered. It's copied over, and changes to the property are not reflected back in the controller. On the other hand, input
helpers are bound two-way. Any changes to the value in the input
helper will be reflected in the controller.
Even though the bracket input tag value is set to prop1
, it's not changing the {{prop1}}
property elsewhere in the template. This is because the value is set to work only one way. The only way to change the value of prop1
in the controller is to send it as an action back to the controller from the template.
This is the basis behind data down, actions up. Data is copied down to the template from the controller or component. Any changes to it are then sent back in an action to the parent component or controller. Keep this concept in mind as it is becoming more and more popular in Ember.
The two-way input
helper updates all the values in the template because it's linked back to the controller. Any changes to the property in the template are reflected back in the controller because it's two-way bound.
When the button is clicked, an action is triggered. It displays three alert boxes. Each alert box will display the prop1
property. It will then toggle the third Boolean property from true
to false
.
Computed properties, or observers, can be added to controllers as well. To learn more about these, check out Chapter 2, The Ember.Object Model.