EmberJS - Template Multiple Segments

---

---

For multiple segments, you can provide model or an identifier for each segment if the route is nested.

Syntax

Router.map(function() {
   this.resource('route_name');
   this.resource('route_name', { path: 'route_path' });
});

Example

The example shows the use of multiple segments in the nested route by providing an identifier to the segment. 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', { path: 'records/:records_id' });
});

export default Router;

Open the file application.hbs file created under app/templates/ with the following code −

{{#link-to 'info'}}Fruits{{/link-to}}
{{#link-to 'record' recoModel}}Some Record{{/link-to}}
{{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 Some Record link, page should open the record.hbs file, which contains the following code −

<p>Some Records</p>
{{model.name}}
{{outlet}}

Now create the controller application.js, which will be created under app/controller/ to with the following code −

import Ember from 'ember';

export default Ember.Controller.extend ({
   recoModel: function(){
      //return the records value to the called route
      return {records_id:1, name:'Docs List'};
   }.property()
});

Output

Run the ember server; you will receive the following output −

When you click on the Fruits link, it will display the following text from the template file −

When you click on the Some Record link, it will display the following text from the template file −