Ember.js Component attributeBindings Property
Last Updated :
24 Jan, 2023
Ember.js is an open-source JavaScript framework used for developing large client-side web applications which are 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 attributeBindings of the component class is a property that is used to set the list of properties as attributes to the component templates in DOM.
Syntax:
attributeBindings: [ attribute1, attribute2.... ];
attribute1 : 'value';
attribute2 : 'value2';
Parameters:
- attributeNames: It is a list of attributes that we want to set.
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 file1
app/components/second.js
Javascript
import Component from '@glimmer/component' ;
import Ember from 'ember' ;
export default Ember.Component.extend({
tagName: 'div' ,
attributeBindings: [ 'id' ],
id: 'component' ,
})
|
app/components/second.hbs
HTML
{{page-title "Component attributeBindings"}}
< h3 >{{yield}}</ h3 >
|
app.css
CSS
h 1 {
font-family : Tahoma , Geneva, Verdana , sans-serif ;
font-size : 25pt ;
color : #2fd778
}
#component{
font-family : -apple-system;
font-size : 22pt ;
background-color : #ae2549 ;
}
|
app/templates/file1.hbs
HTML
< h1 >GeeksForGeeks</ h1 >
< h2 >Hello Geeks keep reading and Grow up</ h2 >
< Second >
This is Component templates tag.
</ Second >
|
Output:
Output1
Example 2: Type the following code to generate the route for this example:
ember generate route file2
app/components/first.js
Javascript
import Component from '@glimmer/component' ;
import Ember from 'ember' ;
import { tracked } from '@glimmer/tracking' ;
export default Ember.Component.extend({
tagName : 'form' ,
attributeBindings: [ 'action' ],
@tracked
name: 'Pokhraj Sahu' ,
@tracked
gender: 'M' ,
@tracked
grade: 'A' ,
@tracked
salary: 78000,
@tracked
mobile: 983938494,
})
|
app/components/first.hbs
HTML
{{page-title "Component attributeBindings"}}
{{yield}}
< div >
< label >Name:</ label >
{{input value=this.name}}
</ div >
< div >
< label >Gender:</ label >
{{input value=this.gender}}
</ div >
< div >
< label >Grade:</ label >
{{input value=this.grade}}
</ div >
< div >
< label >Salary:</ label >
{{input value=this.salary}}
</ div >
< div >
< label >Mobile:</ label >
{{input value=this.mobile}}
</ div >
< br />
< br />< br />
< button type = "submit" >Submit</ button >
{{outlet}}
|
app/templates/file2.hbs
HTML
< First >
< h1 >GEEK's Details: </ h1 >
</ First >
|
Output:
Output2
Reference: https://api.emberjs.com/ember/4.9/classes/Component/properties/attributeBindings?anchor=attributeBindings
Share your thoughts in the comments
Please Login to comment...