Ember.js: Uncaught TypeError: Cannot read property 'enter' of undefined on transitionTo -

i have simple ember.js app. inside view call this.transitionto gives me error:

uncaught typeerror: cannot read property 'enter' of undefined

the error in ember.js @ line 24596, currentstate undefined

here relevant parts of app:

window.plan = ember.application.create({});          plan.router = ember.router.extend({         location: 'hash'     });      plan.indexcontroller = ember.objectcontroller.extend({      });       plan.router.map(function() {         this.route('application', { path: '/' })         this.route('index', { path: "/:current_savings/:monthly_deposit/:time_horizon" });     });      plan.applicationroute = ember.route.extend({         redirect: function(){             this.transitionto('index', 200, 200, 200);         }     })      plan.indexroute = ember.route.extend({         model: function(params) {             var result = this.store.find('calculation', params).then(function(data) {                 return data.content[0];             });              return result;         }     });      plan.currentsavingstextfield = ember.textfield.extend({         focusout: function() {             this.transitionto('index', 150, 200, 200);         }     });      plan.monthlycontributiontextfield = ember.textfield.extend({         focusout: function() {             this.transitionto('index', 150, 200, 200);         }     });      plan.timehorizontextfield = ember.textfield.extend({         focusout: function() {             this.transitionto('index', 150, 200, 200);         }     });  plan.calculation = ds.model.extend({     target_goal: ds.attr('number'),     target_return: ds.attr('number'),     expected_return: ds.attr('number'),     downside_probability: ds.attr('number') });  plan.applicationadapter = ds.restadapter.extend({     namespace: 'plan/' + window.targetreturnid }); 

html:

<script type="text/x-handlebars" data-template-name="index">      <div>         <div>starting balance: {{view plan.currentsavingstextfield size="10"}}</div>         <div>monthly contribution: {{view plan.monthlycontributiontextfield size="10"}}</div>         <div>time horizon: {{view plan.timehorizontextfield size="10"}}</div>     </div>     <div>         <span>plan goal: {{target_goal}}</span>         <span>required return: {{target_return}}</span>         <span>exp return:  {{expected_return}}</span>         <span>downside probability: {{downside_probability}}</span>         <span>time horizon: {{time_horizon}}</span>     </div>  </script> 

this response is:

{    "calculations":[       {          "id":10,          "target_goal":3107800.0,          "target_return":0.089,          "expected_return":0.0708,          "downside_probability":0.0489       }    ] } 

the app works expected until focus out of text field, error.

ember : 1.5.1

ember data : 1.0.0-beta.8.2a68c63a

handlebars : 1.2.1

jquery : 1.11.1

past kingpin2k totally wrong, missed statement transition view. apologize.

transitionto component isn't supported (at least documentation find)

you'll want send action out of component , capture in controller or route.

plan.currentsavingstextfield = ember.textfield.extend({     focusout: function() {         this.sendaction('go', 199, 200, 201);     } });   plan.indexroute = ember.route.extend({     model: function(params) {         var result = this.store.find('calculation', params);       //if wanted first object      // result.then(function(collection){      //   return collection.get('firstobject');      // });         return result;     },   actions:{     go: function(a, b, c){       console.log('transition');       this.transitionto('index',a,b,c);     }   } }); 

http://emberjs.jsbin.com/oxidivu/749/edit