- 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 Areas
It is a multi-line text form field where a user can enter unlimited number of characters. The textarea binds the value of text to the current context.
The {{textarea}} supports the following properties −
- value
- name
- rows
- cols
- placeholder
- disabled
- maxlength
- tabindex
- selectionEnd
- selectionStart
- selectionDirection
- wrap
- readonly
- autofocus
- form
- spellcheck
- required
Syntax
{{textarea value = name cols = "width_of_textarea" rows = "number_of_lines"}}
Example
The example given below specifies multi-line text input control to enter unlimited number of characters. Create a route with name as textarea 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('textarea'); }); export default Router;
Open the file application.hbs file created under app/templates/ with the following code −
<h2>Input Helper Textarea</h2> {{#link-to 'textarea'}}Click Here{{/link-to}} {{outlet}}
When you click the link, page should open the textarea.hbs file, which contains the following code −
Enter text here: <br/><br/>{{textarea value = name cols = "15" rows = "5" placeholder = "Message"}}<br/> <button {{action "send"}}>Send</button> {{outlet}}
Open the textarea.js file created under app/routes/ with the following code −
import Ember from 'ember'; export default Ember.Route.extend({ model: function () { return Ember.Object.create ({ name: null }); } });
Now open the textarea.js file created under app/controllers/ with the following code −
import Ember from 'ember'; export default Ember.Controller.extend({ actions: { send: function () { document.write('Entered text is: ' + this.get('name')); } } });
Output
Run the ember server; you will receive the following output −
When you click on the link, a textarea will get display, enter the text and click on the send button −
Now click the send button, it will display the result as shown in the screenshot below −