
The values can be returned from a component by using the yield option.
Syntax
{#each myval as |myval1|}} {{ yield myval1 }} {{/each}}
Example
The example given below specifies returning values from a component with the yield property. Create a route with the name comp-yield and open the router.js file to define the URL mappings −
import Ember from 'ember'; //Access to Ember.js library as variable Ember import config from './config/environment'; //It provides access to app's configuration data as variable config //The const declares read only variable const Router = Ember.Router.extend ({ location: config.locationType, rootURL: config.rootURL }); //Defines URL mappings that takes parameter as an object to create the routes Router.map(function() { this.route('comp-yield'); }); export default Router;
Create the application.hbs file and add the following code −
//link-to is a handlebar helper used for creating links {{#link-to 'comp-yield'}}Click Here{{/link-to}} {{outlet}} //It is a general helper, where content from other pages will appear inside this section
Open the comp-yield.js file which is created under app/routes/ and enter the following code −
import Ember from 'ember'; export default Ember.Route.extend ({ model: function() { //an array called 'country' contains objects return { country: ['India', 'England', 'Australia'] }; } });
Create a component with the name comp-yield and open the component template file comp-yield.hbs created under app/templates/ with the following code −
{{#comp-yield country=model.country as |myval|}} <h3>{{ myval }}</h3> {{/comp-yield}} {{outlet}}
Open the comp-yield.hbs file created under app/templates/components/ and enter the following code −
<h2>List of countries are:</h2> //template iterates an array named 'country' {{#each country as |myval|}} //each item in an array provided as blobk param 'myval' {{ yield myval }} {{/each}}
Output
Run the ember server; you will receive the following output −

When you click on the link, it will display the list of objects from an array as shown in the screenshot below −

Previous Page:-Click Here
Pingback: EmberJS - Using Block Params - Adglob Infosystem Pvt Ltd