Blog

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 −

Previous Page:-Click Here