Ember: How to get Router and Controller work together? - ember.js

Question

For my login/logout scenario I implemented a conditional routing in ember:
App.Router = Ember.Router.extend({
//needs controller handling
//goLoggedIn: Ember.Route.transitionTo('loggedIn'),
goLoggedOut: Ember.Route.transitionTo('loggedOut'),
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
enter: function(router) {
var logged = getLoginState();
Ember.run.next(function() {
if (logged) {
router.transitionTo('loggedIn');
} else {
router.transitionTo('loggedOut');
}
});
}
}),
loggedIn: Ember.Route.extend({
connectOutlets: function(router, context){
...
}
}),
loggedOut: Ember.Route.extend({
connectOutlets: function(router, context){
...
}
})
...
My index.html says for loggedin view
<!-- Template for out -->
<script type="text/x-handlebars" data-template-name="out">
<hr /><br />
<h1>Logged Out</h1>
<span>Login with "test/test"</span><br /><br />
<label>Username: </label>{{view Ember.TextField valueBinding="App.OutController.username"}}<br />
<label>Password: </label>{{view Ember.TextField valueBinding="App.OutController.password" type="password"}}<br />
{{#if App.loginController.isError}}
<span class="login-error">Error: Invalid username or password.</span><br />
{{/if}}
<br /><button {{action goLoggedIn href=true}}>Login</button>
</script>
Now I am delegating this action simply to my Router. I know that I can delegate this to my controller as well with:
action login target="controller"
but after that, how to do the transitionTo function in my Router? Because I know that this shouldnt be done in my controller. So how to pass it to my Router?
Probably I am wrong and I have to let {{action goLoggedIn href=true}}. Then my Router delegates this with a function to my controller and I get a response. Instead of having goLoggedIn: Ember.Route.transitionTo('loggedIn') I need something like App.LoginController.doLogin and afterwards goLoggedIn: Ember.Route.transitionTo('loggedIn'). When this is the case how to implement it?
EdiT:
Like this?
App.Router = Ember.Router.extend({
//needs controller handling
goLoggedIn: Ember.Route.transitionTo('loggedIn'),
goLoggedOut: Ember.Route.transitionTo('loggedOut'),
root: Ember.Route.extend({
index: Ember.Route.extend({
route: '/',
enter: function(router) {
var logged = getLoginState();
Ember.run.next(function() {
if (logged) {
router.transitionTo('loggedIn');
} else {
router.transitionTo('loggedOut');
}
});
}
}),
loggedIn: Ember.Route.extend({
connectOutlets: function(router, context){
...
}
}),
loggedOut: Ember.Route.extend({
connectOutlets: function(router, context){
...
},
goLoggedIn: function(router, evt) {
router.get('inController').tryLogin()
router.transitionTo('loggedIn')
}
})
...
I get:Cannot call method 'split' of undefined
Edit 2:
It is working now. I had to remove href=true. Thanks

Answer 1

In a typical Ember app, the target property of each controller is set to the Router instance. If you want to send an action to the controller and then on to the router, you can do so within the controller method by saying this.get('target').send('goLoggedIn', optionalEvt)
I would recommend that you let the action be sent to the router directly. You can have a function handle the action that can call a method on one or more controllers before transitioning. e.g.:
...
{{action log href=true}}
...
logIn: function(router, evt) {
router.get('userController').prepareForLogin()
router.transitionTo('loggedIn')
}