Ember.js Ember.Templates.helpers yield() Method
Last Updated :
09 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 yield() method is used to place the template inside another template.
Syntax:
{{ yield hash }}
Parameters:
- hash: It is optional object passed to yield.
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 yield1
app/components/arr.hbs
Javascript
import Component from '@glimmer/component' ;
import {tracked} from '@glimmer/tracking' ;
import { action, addObjects } from '@ember/object' ;
export default class CompactComponent extends Component {
items = [ 'Oxygen' ,
'Source Code' ,
'Infine' ,
'Tenet' ,
'SpiderHead' ,
'The Thing' ,
'A Quiet Place' ,
'The Invisible Man' ,
'Looper' ,
'Ad Astra' ,];
@action
remove(data) {
this .items.removeObject(data);
}
}
|
app/components/arr.hbs
HTML
{{#unless @show}}
This comoponent Don't Have block!!< br />
{{else}}
< ul >
< h3 >{{yield}} : </ h3 >
{{#each this.items as |party|}}
< li >{{party}}</ li >
{{/each}}
</ ul >
< br />
{{textarea value=this.value}}
< br />
< input
type = "button"
id = "check-atIndex"
value = "Remove"
{{action "remove" this.value}}
/>
< br />< br />
{{/unless}}
|
app/templates/yield1.hbs
HTML
< Arr @show={{true}}>
List of items
</ Arr >
{{outlet}}
< Arr />
|
Output:
Ember.js Ember.Templates.helpers yield() Method
Example 2: Type the following code to generate the route for this example:
ember generate route yield2
app/components/arr2.hbs
Javascript
import Component from '@glimmer/component' ;
import { tracked } from '@glimmer/tracking' ;
import { action } from '@ember/object' ;
import { mapBy } from '@ember/object' ;
export default class extends Component {
student = [{
"name" : "Sam Snehil" ,
"age" : 21
},
{
"name" : "Satyam Sahu" ,
"age" : 23
},
{
"name" : "Sohan Argrwal" ,
"age" : 25
},
{
"name" : "Sreya Sarma" ,
"age" : 19
}
,
{
"name" : "Satyam Sahu" ,
}];
print(item) {
let ans = this .student.filterBy( 'name' ,item)
alert(JSON.stringify(ans));
}
}
|
app/components/arr2.hbs
HTML
{{yield}}
< table >
< tr >
< th >Name</ th >
< th >Age</ th >
</ tr >
{{#each this.student as |detail|}}
{{#unless detail.age}}
< tr >
< td >{{get detail 'name'}}</ td >
< td >{{18}}</ td >
</ tr >
{{else}}
< tr >
< td >{{get detail 'name'}}</ td >
< td >{{get detail 'age'}}</ td >
</ tr >
{{/unless}}
{{/each}}
</ table >
< br />
{{textarea value=this.value}}
< br />
< input type = "button"
id = "set-code"
value = "Introduce Student"
{{action 'print' (mut this.value)}}/>
|
app/templates/yield2.hbs
HTML
< Arr2 >
< h1 >
List of Student :
</ h1 >
</ Arr2 >
{{outlet}}
|
Output:
Ember.js Ember.Templates.helpers yield() Method
Reference: https://api.emberjs.com/ember/4.6/classes/Ember.Templates.helpers/methods/yield?anchor=yield
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...