- EmberJS Tutorial
- EmberJS - Home
- EmberJS - Overview
- EmberJS - Installation
- EmberJS - Core Concepts
- Creating and Running Application
- EmberJS - Object Model
- EmberJS - Router
- EmberJS - Templates
- EmberJS - Components
- EmberJS - Models
- EmberJS - Managing Dependencies
- EmberJS - Application Concerns
- EmberJS - Configuring Ember.js
- EmberJS - Ember Inspector
- EmberJS Useful Resources
- EmberJS - Quick Guide
- EmberJS - Useful Resources
- EmberJS - Discussion
Supporting both block and non-block Component Usage
You can support the usage of block and non-block components from single component by using the hasBlock property.
Syntax
{{#if hasBlock}} //code here {{/if}}
Example
The example given below specifies supporting of both block and non-block component usage in one template. 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 () { return { title: "Emberjs", author: "Tutorialspoint", body: "This is introduction" }; } });
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 title = title}} <p class = "author">by (blocked name){{author}}</p> {{body}} {{/comp-yield}} {{comp-yield title = title}} {{outlet}}
Open the comp-yield.hbs file created under app/templates/components/ and enter the following code −
{{#if hasBlock}} <div class = "body">{{yield}}</div> {{else}} <div class = "body">Tutorialspoint data is missing</div> {{/if}} {{yield}}
Output
Run the ember server; you will receive the following output −
When you click on the link, it will block the names as shown in the screenshot below −