ember new router

Question

I have a question about Ember routing and controllers. I've just written a small App to get familiar with the new router. Therefore I've built a button that transitions to another state by clicking on it.

App.PostsView = Em.View.extend({
  click: function() {
    var router;
    this.get('controller').transitionTo('about');
  }
});

My question now is: what does the get method return?. Obviously an instance of the PostController but on the one hand the controller doesn't have a transitionTo() method and on the other hand that would not make any sense.

Answer 1

this.get('foo') returns a property of your Ember object. Since Views can have a "controller" property, this.get('controller') returns the controller bound to your view's controller property (by default the postsController).

this.get('controller').transitionTo() works because as sly7_7 mentioned, transitionTo() is also defined on the controller and delegates to the router. Note, it's probably going to be deprecated and one should use

this.get('controller').transitionToRoute('about');

instead.

Answer 2

You should not do this at the view level, this is what the router is designed for so instead of capturing a click event in the view, rather implement an action on the button and let the router handle it. I suggest you learn the best practices from the get-go, chances are your application will evolve, requiring more elaborate concepts such as handling transactions commits/rollbacks, creating/updating records. So here's my suggestion to you

In your view

<button type="button" {{action onSaveClick}} />Save</button>

In your router

App.FooRoute = App.Route.extend({
    events: {
        onSaveClick: function() {
            this.transitionTo('bar');
        }
    }
})

If for any other reasons, say styling or animation, you find yourself forced to capture the click event in the view, then i suggest to, capture the event, perform your styling and finally send an event to the controller. The event can then be handled the same way in the router

App.FooView = Ember.View.extend({
 click: function() {
   // Do some styling
   this.get('controller').send('onSaveClick')
 }
})

Finally speaking of best practices, try to learn when working with ember to think of your application as a series of states interacting with each other. You'll find yourself bound to implement the concept right. Have a look at this

Answer 3

the controller has a transitionTo: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/ext/controller.js#L36, it basically delegate to it's target (which is the router)