Ember.js Ember.Templates.helpers yield() Method
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:
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:
Reference: https://api.emberjs.com/ember/4.6/classes/Ember.Templates.helpers/methods/yield?anchor=yield
Contact Us