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

here router.js:

import ember 'ember'; import config './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 make when user selects option navbar component, redirected appropriate categories/category_id page. able right id variable in navbar component this.transitionto statement not work. here navbar-header.js:

import ember '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 catid contains appropriate id @ point.         //where error happens:       this.transitionto('/category/' + catid);      }    } }); 

what doing wrong?

edit: heads everyone, can't transitionto component, have use action , send route. , joshfarrent said supposed this.transitionto('category', catid);

you need pass id separate param in transitionto, , remove slashes, this:

this.transitionto('category', catid); 

see transitionto section of ember route docs here.

i'd recommend against using html element's value figure out item has been selected, , rather on each action helper in template:

{{action "categoryselected" value}} 

just replace value same numerical value setting on html element. way, value of element passed categoryselected function follows:

categoryselected: function(value) {    debugger;     this.transitionto('category', value);  } 

finally, there reason you're not using {{link-to}} helper achieve same effect?