CODEWITHSUNDEEP
javascriptember.jshyperlink
Tanya Branagan
Tanya Branagan

Reputation: 571

Ember link-to not working when not passed a model

I have a template at the level just below the application route in my Ember application which contains a navbar with three tabs that should go to three sub routes. The link tos are set up like so:

{{#link-to "route.subroute.subroute-1"}}Route name{{/link-to}}

If you right click on the links, they work, but left clicking on them does not take you to the page. Nothing happens and no error. If you hard code a model id into the link like so it works:

{{#link-to "route.subroute.subroute-1" 1}}Route name{{/link-to}}

But passing a model name in place of the hard-coded id does not work, it merely adds a # to the end of the URL. How can I make this work?

Router.map(function() {

  this.route('/');
  this.route('route', function() {
    this.route('subroute', function() {
      this.route('subroute-1', { path: 'subroute-1/:route-1_id' });
      this.route('subroute-2', { path: 'subroute-2/:route-2_id' });
      this.route('subroute-3', { path: 'subroute-3/:route-3_id' });
    });
  });
});

I tried changing router to 

this.route('/');
  this.route('route', function() {
    this.route('subroute', { path: 'subroute/:model_id' }, function() {
      this.route('subroute-1');
      this.route('subroute-2');
      this.route('subroute-3');
    });
  });
});

but then the findRecord('model', params.model_id) in the route/subroute/{id}/subroute-1 gets "ID passed to findRecord has to be number" error, and params.model_id is undefined.

Upvotes: 0

Views: 1119

Answers (1)

acorncom
acorncom

Reputation: 5955

The reason you are running into problems is because Ember's router expects an id (or model) to be passed as part of the link-to helper, based on what you provide in your Router map:

this.route('route', function() {
  this.route('subroute', function() {
    // the :route-1_id info here causes problems
    this.route('subroute-1', { path: 'subroute-1/:route-1_id' });
    this.route('subroute-2', { path: 'subroute-2/:route-2_id' });
    this.route('subroute-3', { path: 'subroute-3/:route-3_id' });
  });
});

If you don't have an id that you need for your sub route (that you intend to use to retrieve data from somewhere else), then you could do something like this:

this.route('route', function() {
  this.route('subroute', function() {
    this.route('subroute-1');
    this.route('subroute-2');
    this.route('subroute-3');
  });
});

Upvotes: 1

Related Questions