EmberJS - Template Input Helper Text Fields

Text field provides an input field, which allows users to enter the data. The following are the attributes, which can be used within the input helper −

‘readonly’	‘required’	‘autofocus’
‘value’	‘placeholder’	‘disabled’
‘size’	‘tabindex’	‘maxlength’
‘name’	‘min’	‘max’
‘pattern’	‘accept’	‘autocomplete’
‘autosave’	‘formaction’	‘formenctype’
‘formmethod’	‘formnovalidate’	‘formtarget’
‘height’	‘inputmode’	‘multiple’
‘step’	‘width’	‘form’
‘selectionDirection’	‘spellcheck’	‘type’

Syntax

{{input type = "type-of-input" value = "name-of-input-element"}}

Example

The example given below specifies the usage of textfields in the input helper. Create a route with name as textfield and open the router.js file to define the URL mappings −

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend ({
   location: config.locationType,
   rootURL: config.rootURL
});

Router.map(function() {
   this.route('textfield');
});

export default Router;

Open the file application.hbs file created under app/templates/ with the following code −

<h2>Input Helper Text Field</h2>
{{#link-to 'textfield'}}Click Here{{/link-to}}
{{outlet}}

When you click the link, page should open the textfield.hbs file, which contains the following code −

Enter Name : {{input type = "text" placeholder = "Enter the name" value = name}}
<button {{action "send"}}>Send</button>
{{outlet}}

Open the textfield.js file created under app/routes/ with the following code −

import Ember from 'ember';

export default Ember.Route.extend ({
   model: function () {
      //initializing the variable 'name' as null by using create method
      return Ember.Object.create ({
         name: null
      });
   }
});

Now open the textfield.js file created under app/controllers/ with the following code −

import Ember from 'ember';

export default Ember.Controller.extend ({
   actions: {
      //this actions get the name from the text field
      send: function () {
         document.write('Name is: ' + this.get('name'));
      }
   }
});

Previous Page:-Click Here