title: Ember, component to redirect
body: <p>In my ember app I have an <code>activities</code> route, with corresponding route, controller and a few components, the template contains:</p>
  <p><code>{{carousel-activities activities=model}}</code></p>
  <p>The <code>carousel-activities</code> contains:</p>
  <pre><code>{{#each activities as |activity|}}
      &lt;li&gt;{{carousel-block activity=activity}}&lt;/li&gt;
    {{/each}}
  </code></pre>
  <p>The <code>carousel-block</code> contains some HBS to show the content of each activity:</p>
  <pre><code>&lt;div class=&quot;carousel-block&quot;&gt;
    {{#link-to 'activity' activity class=&quot;small&quot;}}
      &lt;div class=&quot;full-width-image&quot;&gt;
        &lt;img src=&quot;{{activity.image}}&quot; class=&quot;img img-responsive full-width&quot; alt=&quot;{{activity.title}}&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;text-center&quot;&gt;
        &lt;h1&gt;{{activity.title}}&lt;/h1&gt;
      &lt;/div&gt;
    {{/link-to}}
  &lt;/div&gt;
  </code></pre>
  <p>The block component uses <a href="https://github.com/runspired/ember-gestures" rel="nofollow noreferrer">ember-gestures</a> to monitor the <code>panDown</code>, when the event happens the block will redirect the browser to the activity details page.</p>
  <pre><code>#app/controllers/activities.js
  import Ember from 'ember';
  
  export default Ember.Controller.extend({
  
  });
  </code></pre>
  <hr />
  <pre><code>#app/components/carousel-activities.js
  import RecognizerMixin from 'ember-gestures/mixins/recognizers';
  import Ember from 'ember';
  
  const {
    Component
  } = Ember;
  
  export default Component.extend(RecognizerMixin, {
    recognizers: 'pan',
    panDown() {
      console.log(&quot;panDown&quot;);
      this.transitionTo('activity', this.get('activity'));
    }
  });
  </code></pre>
  <hr />
  <pre><code>#app/components/carousel-block.js
  import Ember from 'ember';
  
  export default Ember.Component.extend({
  });
  </code></pre>
  <p>If I load the activities route, and swipe down on it (raise the panDown event) I get this error in the console:</p>
  <pre><code>panDown
  ember.debug.js:6208 DEPRECATION: Ember.View#transitionTo has been deprecated, it is for internal use only [deprecation id: ember-views.view-transition-to]
          at HANDLERS.(anonymous function) (http://localhost:4200/assets/vendor.js:16380:7)
          at raiseOnDeprecation (http://localhost:4200/assets/vendor.js:16290:12)
          at HANDLERS.(anonymous function) (http://localhost:4200/assets/vendor.js:16380:7)
          at invoke (http://localhost:4200/assets/vendor.js:16396:7)
          at deprecate (http://localhost:4200/assets/vendor.js:16349:32)
          at Object.deprecate (http://localhost:4200/assets/vendor.js:26468:37)
          at _emberMetalMixin.Mixin.create.transitionTo (http://localhost:4200/assets/vendor.js:52805:24)
          at panDown (http://localhost:4200/assets/myproject.js:261:12)
          at _emberRuntimeSystemObject.default.extend.trigger (http://localhost:4200/assets/vendor.js:55654:23)
  ember.debug.js:42747 Uncaught TypeError: Cannot read property 'enter' of undefined_emberMetalMixin.Mixin.create._transitionTo @ ember.debug.js:42747_emberMetalMixin.Mixin.create.transitionTo @ ember.debug.js:42736panDown @ carousel-activities.js:24_emberRuntimeSystemObject.default.extend.trigger @ ember.debug.js:45584superWrapper @ ember.debug.js:23209Backburner.run @ ember.debug.js:678Backburner.join @ ember.debug.js:702run.join @ ember.debug.js:21280_emberMetalAssign.default.handleEvent @ ember.debug.js:46458exports.default._emberMetalMixin.Mixin.create._Mixin$create.handleEvent @ ember.debug.js:43395exports.default._emberRuntimeSystemObject.default.extend._bubbleEvent @ ember.debug.js:44482(anonymous function) @ ember.debug.js:44424jQuery.event.dispatch @ jquery.js:4737elemData.handle @ jquery.js:4549triggerDomEvent @ hammer.js:2497Manager.emit @ hammer.js:2438emit @ hammer.js:1474Recognizer.emit @ hammer.js:1485inherit.emit @ hammer.js:1764Recognizer.tryEmit @ hammer.js:1502Recognizer.recognize @ hammer.js:1549Manager.recognize @ hammer.js:2314inputHandler @ hammer.js:517MEhandler @ hammer.js:826Input.domHandler @ hammer.js:430
  </code></pre>