Ember.js Cookbook

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 ...