Cannot generate URL with dynamic segments using urlFor method

Questions Routing
1

Hello, people

Point me what’s wrong with my code,

I can able to generate URL using urlFor() when I’m in the route “/1/1/orders”. but I’m unable to generate a URL in the application route.

Kindly advise me.

here is the reference ember-twiddle

2

When generating a URL for a nested route, the models (or parameters) are passed in separately to both urlFor and the link-to component. They are ordered from outside to inside

So if you had the nested route B inside A, you’d pass the params for route A, then for route B, like so:

// router.js
Router.map(function() {
  this.route("a", { path: '/:a_param' }, function(){
      this.route("b", { path: '/:b_param' });
  });
});

routerService.urlFor('a.b', paramForA, paramForB);

In your case there are multi params for each route which you can either pass in one after the other:

var routeName = "scope.purchase.invoice";
var dynamicSegments = [1, 2, 3, 20, 1];
var url = this.router.urlFor(routeName, ...dynamicSegments);

Or you can group them in an object for each route:

var routeName = "scope.purchase.invoice";
var dynamicSegments = [{ scopeId: 1, scopeData: 2}, {invoiceId: 3, pageSize: 20, pageIndex: 1 }];
var url = this.router.urlFor(routeName, ...dynamicSegments);
3

Thanks for your info,

Much appreciated, if you could explain this scenario, I can able to make URL with a single object if I was in the route “/1/1/orders”.

4

That’s exactly right:

var routeName = "scope.orders";
var dynamicSegments = { scopeId: 1, scopeData: 2};
var url = this.router.urlFor(routeName, dynamicSegments);

Would generate the URL /1/2/orders

5

Yes, you are right,

but my case is different, I would like to make a URL (/1/1/purchase/2/1/2) dynamically on-demand when I was in application route (home route) with single objects (includes all dynamic segments).

I can able to produce the URL (/1/1/purchase/2/1/2) using a single (includes all dynamic segments) object when I was in route “/1/1/orders”.

I hope you understand my scenario.

6

By ‘single object’ I’m guessing you have an EmberData record or similar model. In that case you’ll need to construct the parameters for generating the route from the model, I don’t think you can use it directly

var routeName = "scope.purchase.invoice";
var orderParams = {
  scopeId: model.scopeId,
  scopeData: model.scopeData
};
var invoiceParams = {
  invoiceId: model.invoiceId,
  pageSize: 20,
  pageIndex: 1
};
var url = this.router.urlFor(routeName, orderParams, invoiceParams);

(If this isn’t what you’re after then an example of what you mean when you say ‘single object’ would help me understand what you’re stuck on)

7

Thanks for your explanation,

let consider this scenario,

if you’re in-home route (which means ‘/’). now when I hit ‘Make Url’ button it causes an error (You must provide param ‘scopeId’ to generate)

  var routeName = "scope.purchase.invoice";
  var dynamicSegments = { scopeId: 1, scopeData: 2, invoiceId: 3, pageSize: 20, pageIndex: 1 };
  var url = this.router.urlFor(routeName, dynamicSegments);

Please now navigate to route /1/1/orders , then hit the ‘Make Url’ button it will generate URL without any issues.

I can make a URL if I use your suggested way.

var routeName = "scope.purchase.invoice";
var orderParams = {
  scopeId: model.scopeId,
  scopeData: model.scopeData
};
var invoiceParams = {
  invoiceId: model.invoiceId,
  pageSize: 20,
  pageIndex: 1
};
var url = this.router.urlFor(routeName, orderParams, invoiceParams);