Stackoverflow_33820529

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

application.template.hbs

{{outlet}}

<p>
{{#link-to 'users'}} Go to Users {{/link-to}}
</p>
<br>
<br>

router.js

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

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('users', {path: '/users'}, function () {
    this.route('edit', {path: 'edit/:userid'});
    this.route('details', {path: 'details/:userid'})
  })
});

export default Router;

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}

users.details.route.js

import Ember from 'ember';

export default Ember.Route.extend({
 renderTemplate () {
  	this.render('users.edit');
  }
});

users.details.template.hbs

Users Details Template

users.edit.route.js

import Ember from 'ember';

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

users.edit.template.hbs

Users edit template

users.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model () {
  	return Ember.A([
      {userid: "123", name: "User1"},
      {userid: "456", name: "User2"},
      {userid: "890", name: "User3"}
    ])
  }
});

users.template.hbs

<table>
{{#each model as |user|}}
	<tr>
		<td>User-id: {{user.userid}}</td>
  	<td>User Name: {{user.name}} </td>
    <td> {{#link-to 'users.edit' user.userid}}Edit{{/link-to}}</td>
    <td> {{#link-to 'users.details' user.userid}} Details {{/link-to}} </td>
  </tr>
{{/each}}
</table>


{{outlet}}