- 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
Template Additional Attributes on a Link
You can add the additional attributes on a link with the help of link-to helper.
Syntax
{{link-to 'link-text' 'route-name' class = "btn-primary"}}
Example
The example shows how to add additional attributes on a link. Create a route with the name as info and open the router.js file to define the URL mappings −
import Ember from 'ember'; import config from './config/environment'; const Router = Ember.Router.extend ({ location: config.locationType, rootURL: config.rootURL }); Router.map(function() { this.route('info'); }); export default Router;
Open the file application.hbs file created under app/templates/ with the following code −
//Adding the additional attributes on a link as class = "btn btn-primary" {{link-to 'Click For Fruits List' 'info' class = "btn btn-primary"}} {{outlet}}
When you click the "Click For Fruits List" link, page should open the info.hbs file which contains the following code −
<p>Some Fruits</p> <ul> <li>Orange</li> <li>Banana</li> </ul> {{outlet}}
Output
Run the ember server; you will receive the following output −
Next, click on the Click For Fruits List, it will display the following text from the template file −
emberjs_template.htm
Advertisements