Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to generate url for a route in Ember.js

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.

like image 629
Jakub Truneček Avatar asked Feb 02 '14 16:02

Jakub Truneček


People also ask

How to generate route in Ember?

The map() method of your Ember application's router can be invoked to define URL mappings. When calling map() , you should pass a function that will be invoked with the value this set to an object which you can use to create routes.

What is Ember serve?

What it does. ember serve takes all of the app's files and turns them into something that can be rendered in the browser. By default, we can view the app by visiting http://localhost:4200 . It's a good idea to keep the server running as we work so that we know as soon as possible that we've broken something.

How does Ember js work?

Ember. js uses Handlebars, a lightweight templating engine also maintained by the Ember team. It has the usual templating logic, like if and else , loops and formatting helpers , that kind of stuff. Templates may be precompiled (if you want to cleanly organize them as separate .

What is a model in Ember?

In Ember Data, models are objects that represent the underlying data that your application presents to the user. Note that Ember Data models are a different concept than the model method on Routes, although they share the same name.


1 Answers

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.

like image 115
Luke Melia Avatar answered Sep 30 '22 07:09

Luke Melia