CODEWITHSUNDEEP
ember.js
user3169700
user3169700

Reputation: 171

How can I transitionTo a route that includes a model id, from having the id stored in a variable?

Here is my router.js:

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('category', {path: '/category/:category_id'});
  this.route('listing', {path: '/listing/:listing_id'});
});

export default Router;

I'm trying to make it so that when the user selects an option from the navbar component, they will be redirected to the appropriate categories/category_id page. I am able to get the right ID into a variable in the navbar component but my this.transitionTo statement does not work. Here is the navbar-header.js:

import Ember from 'ember';

export default Ember.Component.extend({
  model() {
     return this.store.findAll('category');
   },
   actions: {
     categorySelected: function(){
       debugger;
       var e = document.getElementById("categories");
       var catId = e.options[e.selectedIndex].value;
       //I have verified that catId contains the appropriate ID at this point.

       //Where the error happens:
      this.transitionTo('/category/' + catId);
     }
   }
});

What am I doing wrong?

EDIT: Heads up everyone, you can't do a transitionTo from a component, you have to use an action and send it back to the route. And as joshfarrent said it is supposed to be this.transitionTo('category', catId);

Upvotes: 0

Views: 363

Answers (1)

joshfarrant
joshfarrant

Reputation: 1099

You need to pass the Id as a separate param in the transitionTo, and remove the slashes, like this:

this.transitionTo('category', catId);

See the transitionTo section of the Ember Route docs here.

I'd also recommend against using the HTML element's value to figure out which item has been selected, and rather do something like this on each action helper in your template:

{{action "categorySelected" VALUE}}

Just replace VALUE with the same numerical value that you were setting on the HTML element. This way, the value of the element will be passed to your categorySelected function as follows:

categorySelected: function(value) {
   debugger;

   this.transitionTo('category', value);
 }

Finally, is there a reason you're not just using a {{link-to}} helper to achieve the same effect?

Upvotes: 3

Related Questions