ember.js struggling with transitionTo from view or controller

Question

What is the proper way to call a route from the controller or view. For instance I have a table with many rows. Every row View has a click method that should call the router. It doesn't work I am having trouble navigating the app from the controller or view.

Here is an example: http://jsfiddle.net/arenoir/Cs938/

App.TableView = Ember.CollectionView.extend({
  tagName: 'table',
  contentBinding: 'controller.rows',
  itemViewClass: Ember.View.extend({
    tagName: 'tr',
    template: Ember.Handlebars.compile("<td>{{view.content.name}}"),
    click: function(){
      var router, tab;
      router = this.get('controller.target.router');
      tab = this.get('content.id');
      router.goTab(tab);
    }
  })
});

The following post is helpful. EmberJS: How to transition to a router from a controller's action.

score 6 · Accepted Answer · answered Nov 21 '12 at 09:12

6

That is the current implementation of the Transitioning Logic in your view:

      click: function(){
          var router, tab;
          router = this.get('controller.target.router');
          tab = this.get('content.id');
          router.goTab(tab);
      }

Change it to this implementation:

  click: function(){
      var router, tab;
      router = this.get('controller.target.router');
      tab = this.get('content.id');
      router.transitionTo(tab);
  }

This fixes the fiddle. But from your example it is not clear, why you want to do trigger Transitions in your View. Statemanagement should always happen in the Router. Another awkward thing is that you get your rows from the ApplicationController. Why don't u use an ArrayController. So from my point of view, there seem to be some things in the wrong place.

answered Nov 21 '12 at 09:12

mavilein

11,648
4
43
48

I agree the data should be in its own controller but not necessary for the example. How would you add a click event to the table row to navigates the application without calling transitionTo? Making a table row clickable was the simplest example I could think of where navigating from the view is necessary. Other examples would be a plugin that accepts a callback function. There must be a proper way to navigate the app from a view. – Aaron Renoir Nov 21 '12 at 21:29
What do you mean with "Navigating the Application without calling transitionTo"? State within Ember Apps is always handled by a Router/StateManager. Can cou clarify your question? – mavilein Nov 22 '12 at 10:13
How would you add a click event to a table row that transitions to the show action? – Aaron Renoir Nov 25 '12 at 19:14
What do you mean with 'show action'? I had a look at the fiddle again but did not find an action named like this. – mavilein Nov 26 '12 at 10:15
The fiddle is an abstraction demonstrating adding a click event to a element in the dom that when clicked transitionsTo a different action in the router. We agree that transitionTo doesn't belong in the view but if we shouldn't call transitionTo in the view what is the proper way to get the determined behavior. (eg clicking table rows) – Aaron Renoir Nov 26 '12 at 17:06
I updated the fiddle. Have a look at the template of the table view. I added an action helper, which will cause the cells to trigger the action 'showAction', which passes an instance of bar as context. I added an action with this name to the router, which in turn calls transitionTo. The clicked bar instance is then available in your implementation of connectOutlets. – mavilein Nov 26 '12 at 20:53
What is the url to the updated fiddle? From your description it sounds like you added the action helper in the template. Here is another fiddle that demonstrates the need to call transitionTo from a view. http://jsfiddle.net/arenoir/rjVUN/ – Aaron Renoir Nov 27 '12 at 04:49
I found the jsfiddle by Aaron above useful for my case and **updated** it to use **the current router semantics** and I am adding it here incase someone else might find it useful in the future: **http://jsfiddle.net/jsjyw/1/** – brg Jun 24 '13 at 20:09
This tecnique works, but there is no separation of concerns, it deviates from "the Ember way". See this answer: http://stackoverflow.com/a/20121081/7852 – givanse May 14 '14 at 06:43

ember.js struggling with transitionTo from view or controller

1 Answers1

Linked