Search code examples
ember.jsurl-routingember-cli

Url Mapping in Ember js

I have two separate routes parking and Car (not a nested route).

Parking route has dynamic segment like parking id /parking/21 and Car has car name and id /car/ford/12

Router.js:

Router.map( function() {
   this.route("parking", { path: "/parking/:parkingId"})
   this.route("car", { path: "/car/:carName/:carId" })
});

when transition from parking route to car route, i need a url like (/parking/21/ford/12)

Solution

  • If you do not want nesting, then you need to include the full URL in you car route, like so:

    Router.map( function() {
   this.route("parking", { path: "/parking/:parkingId"});
   this.route("car", { path: "/parking/:parkingId/car/:carName/:carId" });
});

    When transitioning to the car route, you once again need to pass all three dynamic segments, something like:

    <LinkTo @route="car" @models=(array "myParkingId" "myCarName" "myCarId") />

    Or:

    this.router.transitionTo('car', "myParkingId", "myCarName", "myCarId");