New Twiddle

controllers.application.js

import Ember from 'ember';

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

router.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

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

Router.map(function() {
  this.route('sibling');
  this.route('parent', function() {
    this.route('child-one');
    this.route('child-two');
  });
});

export default Router;

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  redirect() {
    this.replaceWith('sibling');
  }
});

routes.parent.js

import Ember from 'ember';

export default Ember.Route.extend({
  queryParams: {
    foo: {
      refreshModel: true
    }
  },
  
  model(params) {
    params.foo
    console.log('ParentRoute#model()');
  }  
});

templates.application.hbs

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<div class="h-screen bg-gray-100">
  <div class="bg-gray-800">
    {{#link-to "sibling" activeClass="border-4 border-blue-200" class="inline-block p-2 text-blue-200 hover:text-blue-100"}}
      Sibling
    {{/link-to}}
    {{#link-to "parent" activeClass="border-4 border-blue-200" class="inline-block p-2 text-blue-200 hover:text-blue-100"}}
      Parent route
    {{/link-to}}
  </div>

  {{outlet}}
</div>

templates.parent.child-one.hbs

<h2>parent.child-one</h2>

templates.parent.child-two.hbs

<h2>parent.child-two</h2>

templates.parent.hbs

<div class="h-full flex">
  <div class="w-1/4 flex flex-col bg-gray-300">
    {{#link-to "parent.index" activeClass="border-4 border-blue-800" class="inline-block p-2 hover:text-blue-800"}}
      parent.index
    {{/link-to}}

    {{#link-to "parent.child-one" activeClass="border-4 border-blue-800" class="inline-block p-2 hover:text-blue-800"}}
      parent.child-one
    {{/link-to}}
    
    {{#link-to "parent.child-two" activeClass="border-4 border-blue-800" class="inline-block p-2 hover:text-blue-800"}}
      parent.child-two
    {{/link-to}}
  </div>

  <div class="p-4">
    {{outlet}}
  </div>
</div>

templates.parent.index.hbs

<h2>parent.index</h2>

templates.sibling.hbs

<h1>sibling</h1>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}