Using template input helpers

To create common form controls, input helpers can be used. This recipe will go over how to use them in our Ember applications.

How to do it...

The most common input helper is {{input}}. It wraps around the Ember.TextField view and is almost identical to the traditional <input> HTML element.

  1. Create a new project. In the 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.

  2. When rendered, it will look as follows:
    <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.

  3. Create a new 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.

  4. Open the controller and add a new property. We'll call this helloText:
    // app/controllers/application.js
import Ember from 'ember';

export default Ember.Controller.extend({
    helloText: 'Hello World'
});
  5. Edit the 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.

  6. Let's add a simple action to the 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.

  7. As we haven't created a key press, we'll add it to our 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.

How to use checkbox helpers

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.

  1. In a new project, open the 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.

  2. Generate an application controller. This will be used to store our isChecked property:
    $ ember g controller application
  3. Update the controller with the new 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.

  4. The isChecked property is bound to the checkbox. After it's rendered, it should look as follows:
    …
<input type="checkbox" checked="true"/>

How to use text areas

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.

How it works...

The input, textarea, and checkbox are all helpers that make it easier to work with common form controls. They wrap around Ember.TextField, Ember.Checkbox, and Ember.TextArea.

With these helpers, we can easily bind elements and actions to them.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset