- EmberJS Tutorial
- EmberJS - Home
- EmberJS - Overview
- EmberJS - Installation
- EmberJS - Core Concepts
- Creating and Running Application
- EmberJS - Object Model
- EmberJS - Router
- EmberJS - Templates
- EmberJS - Components
- EmberJS - Models
- EmberJS - Managing Dependencies
- EmberJS - Application Concerns
- EmberJS - Configuring Ember.js
- EmberJS - Ember Inspector
- EmberJS Useful Resources
- EmberJS - Quick Guide
- EmberJS - Useful Resources
- EmberJS - Discussion
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')); } } });
Output
Run the ember server; you will receive the following output −
When you click on the link, an input field will get display, which allows users to enter the data −
Now click on the send button, it will display the result as shown in the screenshot below −