- 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
EmberJS - Rendering a Template
The routes are used for rendering the external template to the screen which can be achieved by defining templateName in the route handler.
Syntax
Ember.Route.extend ({ templateName: 'path' });
Example
The following example shows how to render a template for displaying data. Create a new route as specified in the previous chapters. Here we have created the route as posts and open the router.js file with the following code to define 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 }); Router.map(function() { this.route('posts', function() { this.route('new'); }); }); //It specifies Router variable available to other parts of the app export default Router;
Create the application.hbs file and add the following code in it −
//link-to is a handlebar helper used for creating links {{#link-to 'posts'}}Click Here{{/link-to}} {{outlet}} //It is a general helper, where content from other pages will appear inside this section
Open the file posts.js created under app/routes/ with the following code −
import Ember from 'ember'; export default Ember.Route.extend ({ templateName: 'posts/new' });
Open the posts/new.hbs file created under app/templates/ with the following code −
<h2>Posts</h2> Page is rendered by defining templateName property. {{outlet}}
Output
Run the ember server and you will receive the following output −
When you click the link that you receive in the output, it will generate a result as in the following screenshot −
To Continue Learning Please Login
Login with Google