The {{link-to}} component can be used to create a links to a route.
Syntax
{{#link-to route}}
//code here
{{/link-to}}
The following table lists down the properties of the links −
| S.No. | Links & Description |
|---|---|
| 1 | Multiple Segments For multiple segments, you can provide model or an identifier for each segment if the route is nested. |
| 2 | Using Link-to as an Inline Helper Use the link-to as an inline component by providing link text as the first argument to the helper. |
| 3 | Adding Additional Attributes on a Link You can add the additional attributes on a link while creating it. |
| 4 | Replacing History Entries You can add entries to the browser’s history while moving between the routes by using the link-to helper. |
Example
The following example shows how to link to a different routes. Create a new route and name it as note 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('note');
});
export default Router;
Open the application.hbs file created under app/templates/ with the following code −
{{#link-to 'note'}}Click Here{{/link-to}}
{{outlet}}
When you click the above link, page should open the note.hbs file with the following text −
<h4>Welcome to Adglob</h4>
{{outlet}}
Output
Run the ember server and you will receive the following output −
When you click on the link, it will display the text from the template file.
Previous Page:-Click Here
Pingback: EmberJS - Template Multiple Segments - Adglob Infosystem Pvt Ltd
Pingback: EmberJS - Template link-to as Inline Helper - Adglob Infosystem Pvt Ltd
Pingback: Template Replacing History Entries - Adglob Infosystem Pvt Ltd