Ember.js Ember.Templates.helpers input() Method
Last Updated :
08 Nov, 2022
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which is based on Model-View-Controller (MVC) architecture. Ember.js is one of the most widely used front-end application frameworks. It is made to speed up development and increase productivity. Currently, it is utilized by a large number of websites, including Square, Discourse, Groupon, Linked In, Live Nation, Twitch, and Chipotle.
The input() method is used to create the HTML <input> element.
Syntax:
{input hash}
Parameters:
- hash: It is and hash object.
Steps to Install and Run Ember.js:
Step 1: To run the following examples you will need to have an ember project with you. To create one, you will need to install ember-cli first. Write the below code in the terminal:
npm install ember-cli
Step 2: Now you can create the project by typing in the following piece of code:
ember new <project-name> --lang en
To start the server, type:
ember serve
Example 1: Type the following code to generate the route for this example:
ember generate route input1
app/components/arr.js
Javascript
import Component from '@glimmer/component' ;
import { tracked } from '@glimmer/tracking' ;
import { action } from '@ember/object' ;
export default class Arr2Component extends Component {
@tracked
data = '' ;
@tracked
ar = [
'Ram' ,
'Lalu' ,
'Rohit' ,
'Pokhu' ,
'Arabh' ,
'Sam' ,
]
@action
add(item) {
this .ar.addObject(item);
}
}
|
app/components/arr.hbs
HTML
{{#each this.ar as |temp|}}
< li >{{temp}}</ li >
{{/each}}
< br />
< br />
< label >Enter Name : </ label >
{{input value=this.data}}
< br />
< input type = "Button" value = "Add"
{{action 'add' this.data}}/>
|
app/templates/input1.hbs
HTML
{{page-title "Input"}}
< h2 >
Describing input
</ h2 >
< Arr />
|
Output:
Ember.js Ember.Templates.helpers input() Method
Example 2: Type the following code to generate the route for this example:
ember generate route input2
app/components/list.js
Javascript
import Component from '@glimmer/component' ;
import { action } from '@ember/object' ;
import { tracked } from '@glimmer/tracking' ;
export default class ListComponent extends Component {
@tracked
s = false ;
@action
show() {
this .s = true ;
}
get p() {
return document.querySelector( '#list' );
}
}
|
app/components/list.hbs
HTML
{{#if this.s}}
{{#in-element this.p}}
{{#each @a as |temp|}}
< li >
{{temp}}
</ li >
{{/each}}
{{/in-element}}
{{/if}}
< input type = "Button" value = 'Show list'
{{on 'click' this.show}}>
|
app/templates/input2.hbs
HTML
{{page-title "input"}}
Describing input :
< div id = "list" ></ div >
< List @a={{array 'Sam' 'Rahul' 'Dadu' 'Arabh' }} >
</ List >
|
Output:
Ember.js Ember.Templates.helpers input() Method
Reference: https://api.emberjs.com/ember/release/classes/Ember.Templates.components/methods/Input?anchor=Input
Share your thoughts in the comments
Please Login to comment...