Emberjs transitionToRoute to new tab

Question

I would like to make Ctrl and Meta Key possible when users click on link inside an EmberJS app.

Is that possible to open the transitionToRoute into a new tab?

Answer 1

If using Ember 2.16 or higher, you can use the RouterService#urlFor https://emberjs.com/api/ember/3.0/classes/RouterService/methods/urlFor?anchor=urlFor method with works exactly like transitionTo/transitionToRoute but returns a url instead of transitioning to it.

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default Controller.extend({
  routerService: service('router'),

  actions: {
    openSomething(id) {
      let routerService = this.get('routerService');
      let url = routerService.urlFor('my-route', id);

      window.open(url);
    }
  }
});

For users below Ember 2.16, you can use a polyfill: https://github.com/rwjblue/ember-router-service-polyfill

EDIT 08/2020 class syntax

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { computed } from '@ember/object';

export default class SomeController extends Controller {
  @service('router') routerService;

  @computed('model.id')
  get url() {
    let url = this.routerService.urlFor('my-route', this.model.id);

    return url;
  }
}

Note that for a more accessible app, the url generated should be on a getter using @tracked or @computed and passed to <a href={{this.url}} target='_blank' rel='noopenner noreferrer'>open</a>

Answer 2

Good question... If you use {{link-to}} then it will just work without any "hacks"...

But if you have to do it inside your click action then you can't use transitionToRoute.

You can probably check if ctrl/meta keys are down (see JavaScript: Check if CTRL button was pressed)

Then you will have to use window.open(routeUrl).

You can then generate the routeUrl using router#generate, see How to generate url for a route in Ember.js

PS: I haven't tried any of this just guessing but it already feels dirty and smells bad. I would recommend {{link-to}} if possible.

PPS: I would love to hear how you solved it :)