CODEWITHSUNDEEP
javascriptember.js
arpit
arpit

Reputation: 788

Define transitionTo in Emberjs component

I've a component which is being used at several routes. Now in that component I want to use swipeLeft and swipeRight events from ember-gestures library.

When i try alert messages they get fired on both events. But when I try to run this.transitionTo('someRoute', dynamicPart) then it doesn't get fired.

I get Uncaught TypeError: this.transitionTo is not a function(…) error.

How can I use transitionTo() from Ember-component?

I have 3 routes(tours, schedule, soc) and have 3 tabs on ui for that. I'm calling activity-details component each time to display all details of that activity. Here is the code for that: // activity-details :: component

 next: Ember.computed('listOfThisTypeOfActivities', 'currentActivityId',      function(){
      |> Logic to find out the next activity 
      |> Simply grabbing the currentActivityId and then getting the next item from the listOfThisTypeOfActivities
     }),
    // Similarly I have 'prev' computed property

    swipeRight(next){
      console.log('Right Swipe' ); // this works
      // alert(next.id);
      this.transitionTo('schedule', next.id);
    },

    swipeLeft(e){
      this.transitionTo('schedule', prev.id); // this doesn't work
    },

I want to swipe between these activities. i.e. if I'm at schedule/1 then on swipe event i should be navigated to schedule/2 route.

The other problem is => I have 3 types of activities: Social Activities, Schedule, Tours (and each one have its own route). Hence it seems wrong to write next and prev computed properties in component itself. Also we don't use ember-data, this list of activities are coming from services. Each route(/tours/, /schedule/) has it's own list of activities.(i.e. tours and schedule both are nothing but activity only).

Update

After @torazaburo and @Patsy Issa and @kumkanilam's suggestions: 1. I have moved next and prev computed properties to the controller. 2. I have moved the logic for route-navigation to controller with the help of closure actions. 3. It's all working.

Though I've written roughly similar code in all 3 controllers, I'm sure it can be improved. I just don't know how. But I'm very happy that I'm able to make it work.

Thanks a lot @torazaburo, @patsyIssa and @kumkanilam for your feedback and showing me the better way.

Upvotes: 0

Views: 530

Answers (1)

acorncom
acorncom

Reputation: 5955

this.transitionTo is a route-specific method. Under the hood it calls the private Ember router service. You will either need to inject the private routing service into your component (which could break once the new Ember router is released) or send your transition requests up to actions in your route.

Upvotes: 1

Related Questions