Ember.js: Uncaught TypeError: Impossibile leggere la proprietà 'enter' di undefined on transitionTo

Question

Ho un'app Ember.js abbastanza semplice. All'interno di un panorama che io chiamo this.transitionTo che mi dà l'errore:

TypeError Uncaught: Impossibile leggere la proprietà 'enter' di indefinito

L'errore è in ember.js alla riga 24596, dove currentState è indefinito

Qui ci sono gli elementi rilevanti di mia 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> 

Questa risposta è:

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

L'applicazione funziona come previsto fino a quando mi concentro fuori del campo di testo, quindi ottengo l'errore.

Ember: 1.5.1

Ember dati: 1.0.0-beta.8.2a68c63a

Manubrio: 1.2.1

jQuery: 1.11.1

Answer 1

kingpin2k passato era totalmente sbagliato, ho perso la dichiarazione sul passaggio dalla vista. Chiedo scusa.

transitionTo da un componente non è supportato (almeno da tutta la documentazione che ho trovato)

Ti consigliamo di inviare un'azione fuori del componente e catturare nel vostro controller o percorso.

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 you just wanted the 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

Answer 2

Questa domanda è piuttosto vecchio, ma sembra ancora senza risposta per quanto riguarda il mio googling è andato. Dopo aver suonato in giro (Ember 0.13.0) sono stato in grado di ottenere il seguente codice di lavorare all'interno di un componente:

this.get('_controller').transitionToRoute('index', 150, 200, 200); 

Il _ Infront di controllo si sente come un po 'di un hack e che non dovrebbe essere veramente accessibile al codice utente. get('controller') restituisce infatti qualcosa di completamente diverso.

Accetto di navigare da una vista (Componente) non è la migliore pratica, ma per il mio caso di utilizzo ho alcuni componenti che si inseriscono in una dashboard per la grafica ecc. Che è perfetta per piuttosto che chiamare al controller Azioni. Mi aiuta a tenere tutto isolato in un singolo componente.