Test Active LinkTo

controllers.application.js

import Ember from 'ember';

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

mixins.loadable-route-broken.js

import Ember from 'ember';
export default Ember.Mixin.create({
  isTransitioning: false,
  actions: {
		willTransition(transition){
			if (!this.get('isTransitioning')) {

				transition.abort();
				this.set('isTransitioning', true);

				//very small delay so that the loader shows before the transition gets stuck by the loading on next route
        // NProgress.start();
				Ember.run.later(transition, transition.retry, 50);
			}

			return false;
		},
    
    didTransition() {
			this.set('isTransitioning', false);
			return true;
		},
  }
});

mixins.loadable-route-fixed.js

import Ember from 'ember';

export default Ember.Mixin.create({
  isTransitioning: false,
  actions: {
		willTransition(transition){
			if (!this.get('isTransitioning')) {

				transition.abort();
				this.set('isTransitioning', true);

				//very small delay so that the loader shows before the transition gets stuck by the loading on next route
        // NProgress.start();
				//Ember.run.later(transition, transition.retry, 50);
        
        // workaround from https://github.com/emberjs/ember.js/issues/10557
        // this does not work on ember-twiddle, but does work on the latest version
        /*
        function * params(transition) {
          for (const info of transition.handlerInfos) {
            for (const value of Object.values(info.params)) {
              yield value;
            }
          }
        }
        
        Ember.run.later(this, () => {
          const { url, name, queryParams } = transition.intent;
          if (url) {
            this.transitionTo(url);
          } 
          else {
            this.transitionTo(name, ...params(transition), { queryParams });
          }
        }, 50);
        */
        
        // workaround for ember-twiddle
        Ember.run.later(this, () => {
          const { url, name, queryParams } = transition.intent;
          if (url) {
            this.transitionTo(url);
          }
          else {
            let params = [];
            for (const info of transition.handlerInfos) {
            	for (const value of Object.values(info.params)) {
              	params.push(value); 
              }
            }
            params.unshift(name);
            params.push({ queryParams });
            this.transitionTo.apply(this, params);
            
          }
          
        }, 50);
        
        
			}

			return false;
		},
    
    didTransition() {
			this.set('isTransitioning', false);
			return true;
		},
  }
});

router.js

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

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

Router.map(function() {
  this.route("some", { path: '/some' }, function() {
    this.route('where', { path: '/where/:where_id' }, function() {
      this.route('working', { path: '/working' });
      this.route('not-working', { path: '/not-working' });
    });
  });
});

export default Router;

routes.some.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
   return {};
  }
});

routes.some.where.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
   return Ember.Object.create({ name: 'where', id: params.id }); 
  }
});

routes.some.where.not-working.js

import Ember from 'ember';
import LoadableRouteMixin from 'twiddle/mixins/loadable-route-broken';

export default Ember.Route.extend(
  LoadableRouteMixin, {
    
  model() {
   return this.modelFor('some.where');
  }
});

routes.some.where.working.js

import Ember from 'ember';
import LoadableRouteMixin from 'twiddle/mixins/loadable-route-fixed';

export default Ember.Route.extend(
  LoadableRouteMixin, {
    
  model() {
   return this.modelFor('some.where');
  }
});

templates.application.hbs

<h2>NOTE issues with .active class on Working vs NOT Working links</h2>
<h2>Click between the 2 sets of links to see the active class get "stuck" on the not-working pair</h2>
<style>
.active {
font-weight: bold;
font-size: 20px;
}
</style>
<br>
<strong>Working Links: </strong>
{{link-to "some/where/1/working" "some.where.working" "1"}} |
{{link-to "some/where/2/working " "some.where.working" "2"}}
<br>
<br>

<strong>NOT Working Links: </strong>
{{link-to "some/where/1/not-working" "some.where.not-working" "1"}} |
{{link-to "some/where/2/not-working " "some.where.not-working" "2"}}
<br>
<br>
{{outlet}}
<br>
<br>

templates.some.hbs

<div>
<h1>Some Template</h1>
</div>
{{outlet}}

templates.some.where.hbs

<div>
<h2>Where Template</h2>
</div>
{{outlet}}

templates.some.where.not-working.hbs

<div>
<h3>NOT Working Template</h3>
{{model.name}} {{model.id}}
</div>

templates.some.where.working.hbs

<div>
<h3>Working Template</h3>
{{model.name}} {{model.id}}
</div>

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"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}