- 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 - Template link-to as Inline Helper
You can use the link-to as an inline component by providing link text as the first argument to the helper.
Syntax
Click for {{#link-to 'link1'}}more info{{/link-to}}, info of {{link-to 'link text' 'link2'}}.
Example
The example given below shows the use of link-to as an inline component by specifying the first argument to the helper. Create two routes with the names as info and record 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'); this.route('record'); }); export default Router;
Open the file application.hbs file created under app/templates/ with the following code −
Click for the {{#link-to 'info'}}Fruits{{/link-to}} information, for the documentation {{link-to 'Click for records''record'}} {{outlet}}
When you click the "Fruits" 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}}
If you click on the Click for records link, page should open the record.hbs file which contains the following code −
<p>Some Records</p> <ul> <li>Orange.doc</li> <li>Banana.doc</li> </ul> {{outlet}}
Output
Run the ember server; you will receive the following output −
When you click on the info, it will display the below text from template file −
When you click on the Click for records, it will display the below text from template file −