How to generate url for a route in Ember.js

Question

I am wondering how is possible to generate url for a given route.

My scenario

I have list of calls (db entity) and user can select several calls and share them with other people via email.

After submition of selected calls is created db row with hash and by relation contains selected calls. Now I need generate link which can be sended by e-mail. This link is not the same route as list of call's route.

So the question is: Is it possible to generate url by route and params in Ember.js? Thank you.

This is outside of the ember application? – Kingpin2k Feb 02 '14 at 18:02 — Kingpin2k, Feb 02 '14 at 18:02
No inside the Ember app – Jakub Truneček Feb 02 '14 at 18:40 — Jakub Truneček, Feb 02 '14 at 18:40

score 26 · Accepted Answer · edited Feb 12 '18 at 09:40

You can use Router#generate which delegates to the router.js library.

Ember 2.5 Example

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('post', { path: '/posts/:post_id' }, function(){
    this.route('edit');
  });
});

App.Post = Ember.Object.extend();

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      App.Post.create({
        id: 5,
        title: 'I am post 5'
      }),
      App.Post.create({
        id: 6,
        title: 'I am post 6'
      }),
      App.Post.create({
        id: 7,
        title: 'I am post 7'
      })];
  },
  actions: {
    showUrl: function(post) {
      alert(this.router.generate('post.edit', post));
    }
  }
});

Ember 1.3 Example

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('post', { path: '/posts/:post_id' }, function(){
    this.route('edit');
  });
});

App.Post = Ember.Object.extend();

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      App.Post.create({
        id: 5,
        title: 'I am post 5'
      }),
      App.Post.create({
        id: 6,
        title: 'I am post 6'
      }),
      App.Post.create({
        id: 7,
        title: 'I am post 7'
      })];
  },
  actions: {
    showUrl: function(post) {
      alert(this.router.generate('post.edit', post));
    }
  }
});

This is what the {{#link-to ...}} helper uses under the hood.

Excellent, I looked into LinkView and found this also, but thank you anyway. — Jakub Truneček, Feb 03 '14 at 09:14
Your answer is for Ember 1.x and doesn't work for 2.x. Is it possible in Ember 2.x too? — Envek, May 24 '16 at 16:50
@Envek I've added a JSBin link to an example with Ember 2.5. It still appears to work. — Luke Melia, May 26 '16 at 16:06
@LukeMelia thank you for help. It also works if click on $E sign at the route in Ember Inspector and execute code like ```$E.router.generate('crews.edit', {id: 10002, queryParams: {stopped: true}})``` — Envek, May 30 '16 at 13:17

score 2 · Answer 2 · answered May 01 '19 at 00:20

This can be done in any Ember.js class with the RouterService. It is available since Ember.js 2.15 and in 3.x. Routing functions are no longer confined to Routes.

Ember 2.15, 3.x Example

import Component from '@ember/component';
import { inject as service } from '@ember/service';

export default Component.extend({
  router: service(),

  actions: {
    showUrl(post) {
      alert(this.get('router').urlFor('post.edit', post));
    }
  }
});

How to generate url for a route in Ember.js

My scenario

2 Answers2

Ember 2.5 Example

Ember 1.3 Example

Ember 2.15, 3.x Example

Linked