To create common form controls, input
helpers can be used. This recipe will go over how to use them in our Ember applications.
The most common input
helper is {{input}}
. It wraps around the Ember.TextField
view and is almost identical to the traditional <input>
HTML element.
app/templates
folder, open the application.hbs
file and add an input
helper:// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> <br> <br> {{input value='Hello World'}}
This input
helper is very simple; all it does is set the value of the textbox to hello world
. It is surrounded by double curly braces and supports the normal input attributes.
<h2 id="title">Welcome to Ember</h2> <br> <br> <input type="text" value="Hello World"/>
If needed, we can assign properties to the input
helper.
application
controller. Run this command in the root application
folder:$ ember g controller application
This will generate a new controller that the application can access.
helloText
:// app/controllers/application.js import Ember from 'ember'; export default Ember.Controller.extend({ helloText: 'Hello World' });
application.hbs
file again and set value
to the property:// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> <br> <br> {{input value=helloText}}
The helloText
property is now bound to the input value. Attributes that have quoted values will be set directly to the element. If left unquoted, these values will be bound to the property on the template's current rendering context. In this case, this is the controller.
input
helper. This can be done using the dasherized event name as an attribute to the input
helper:// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> <br> <br> {{input value=helloText key-press='pressed'}}
Whenever a key is pressed, the action pressed will be triggered in the component or controller.
// app/controllers/application.js … actions: { pressed(){ console.log('pressed'); } }
Whenever a key is pressed in the textbox, a message will be logged to the console.
In the previous example, we created a simple input textbox. We can also create a checkbox in the same way. This uses the Ember.Checkbox
view.
application.hbs
file in the app/templates
folder. Let's add a new checkbox:// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> <br> <br> {{input type='checkbox' checked=isChecked}}
This is very similar to the input textbox.
application
controller. This will be used to store our isChecked
property:$ ember g controller application
isChecked
property. Set it to true
:// app/controllers/application.js import Ember from 'ember'; export default Ember.Controller.extend({ isChecked: true });
This controller has only a Boolean property, isChecked
.
isChecked
property is bound to the checkbox. After it's rendered, it should look as follows:… <input type="checkbox" checked="true"/>
To create a
textarea
element, we can use the textarea
helper. This wraps the Ember.TextArea
view.
Create a new project and edit the application.hbs
file in the app/templates
folder. Add a textarea
helper:
// app/templates/application.hbs <h2 id="title">Welcome to Ember</h2> <br> <br> {{textarea value='hello world' cols='20' rows='10'}}
The text area box will be displayed with 20
columns and 10
rows. It will look like this after being rendered:
… <textarea rows="6" cols="80">Hello World</textarea>
Adding actions and attributes work in the same way as the input
and checkbox
helpers.