Dynamic Route Segments

components.main-nav.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  didInsertElement() {
   	let currentType = this.get('currentType');
   	let links = $('.nav-pills li');
    
    for (let i=0; i<links.length; i++) {
      if (links[i].classList.contains('active')) {
        $(links[i]).removeClass('active');
      }
     
    }
  },
  
  actions: {
  	selectType(type) {
    	this.sendAction('changeType', type);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  currentType: 'weekly',
  
  actions: {
  	controllerChangeType(type) {
      this.set('currentType', type);
      this.send('routeChangeType', type);
    }
  }
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function(params) {
  this.route('report-type', { path: ':type' })
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  currentType: 'weekly',
  
  beforeModel() {
    this.replaceWith('report-type', this.get('currentType'));
  }
});

routes.report-type.js

import Ember from 'ember';

export default Ember.Route.extend({
  currentType: 'weekly',
  
  weekly: ['first week', 'second week', 'third week'],
  daily: ['day one', 'day two', 'day three'],
  monthly: ['1st month', '2nd month', '3rd month'],
  
  model() {
    let dataType = this.get(this.get('currentType'));
  
  	return dataType;
  },
  
  actions: {
  	routeChangeType(type) {
    	this.set('currentType', type);
      this.transitionTo('report-type', this.get('currentType'));
    }
  }
});

templates.application.hbs

<div class="container">
<h1>Welcome to {{appName}}</h1>
<br>
<br>

{{main-nav
	currentType=currentType
	changeType="controllerChangeType"
}}

{{outlet}}
<br>
<br>

</div>

templates.components.main-nav.hbs

<ul class="nav nav-pills">
	{{#link-to 'report-type' tagName="li" href=false }}
  	<a href=false {{action 'selectType' 'weekly'}}>Weekly</a>
  {{/link-to}}
  {{#link-to 'report-type' tagName="li" href=false }}
  	<a href=false {{action 'selectType' 'daily'}}>Daily</a>
  {{/link-to}}
  {{#link-to 'report-type' tagName="li" href=false }}
  	<a href=false {{action 'selectType' 'monthly'}}>Monthly</a>
  {{/link-to}}
</ul>

templates.report-type.hbs

<ul>

{{#each model as |data|}}
	<li>{{data}}</li>
{{/each}}

</ul>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0",
    "bootstrap-css": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css",
    "bootstrap-js": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-truth-helpers": "2.0.0"
  }
}