Ember 2 - Transition to route through component

Question

I am trying to make a pagination component for ember 2 app. Since it is a general purpose pagination component, I wanted to use it on many different routes. Because of that I need to somehow (in my mind) provide a name of my route for pagination links to work.

I can pass in my route name (string) to the component easily: {{pagination-component myRoute='myCurrentRouteName'}}. And inside of component: {{link-to myRoute (query-params page=1)}}

It works well for going to pages like: << First, < Previous, Next > , Last >>.

But I also wanted to have a select box with options pointing to all the pages, where if user selects a page, I can transition into that route with queryParams similar to this: myRoute?page=selectedPage. All the tutorials for ember say that transitioning within the component is a no-no.

But how do I do it instead, given that I want my pagination to be generic and I don't want to have action within every single route that deals with pagination and provide same exact transitioning?

So far I found that I can inject the '-routing' into the component, which can work for transitioning within the component, but it also doesn't quiet work for some reason. Plus people say that it is private and unreliable. I also tried making a Route Mixin with action so I can simply sendAction from the component with the selectedPage, but I don't know how to get the router (in order to call router.transitionTo) within my Mixin.

Ember Freak Ember Freak · Accepted Answer · 2017-01-11T02:09:48

We should use public API for transitioning, that is provided in Route transitionTo and in Controller transitionToRoute. this is the recommended approach.

As you said, you can make it work in the component using Ember.getOwner(this).lookup('router:main').transitionTo('myRouteName') but that's strongly against good design.
You can define method named myTransitionToUrl inside actions hash of the Application route, and install ember-route-action-helper addon to call route action method myTransitionToUrl from component.
If you don't want to define method in application route, then you can define it in mixin and implement it in the required route. that's also will work.
My choice and Recommended approach would be, Say pagination-component has prev,next,transtionTo actions, then I will implement all those actions in Mixin and extend it in all route which uses pagination-component. and will inform any data changes to route through actions from component. that will ensure Data Down Actions Up strategy too.
If you are just transitioning to a different route, then the Latest possible way is,

If ember version is greater than 2.15, then you can inject RouterService and and call transitionTo method directly. If you are using the ember version 2.15 or below, then you can use the router service polyfill to use RouterService.

import Ember from 'ember';

export default Ember.Component.extend({
  router: Ember.inject.service(),

  actions: {
    next() {
      this.get('router').transitionTo('other.route');
    }
  }
});

Ember 2 - Transition to route through component

1 Answers