エンバー、Iは、対応するルート、コントローラといくつかのコンポーネントと、<code>activities</code>ルートが私の燃えさしアプリで

Question

をリダイレクトするための構成要素、テンプレートが含む：

{{carousel-activities activities=model}}

carousel-activitiesが含ま：

{{#each activities as |activity|}} 
    <li>{{carousel-block activity=activity}}</li> 
    {{/each}} 

を

carousel-blockには、各アクティビティの内容を表示するためのHBSがいくつか含まれています。

<div class="carousel-block"> 
    {{#link-to 'activity' activity class="small"}} 
    <div class="full-width-image"> 
     <img src="{{activity.image}}" class="img img-responsive full-width" alt="{{activity.title}}"> 
    </div> 
    <div class="text-center"> 
     <h1>{{activity.title}}</h1> 
    </div> 
    {{/link-to}} 
</div> 

ブロックコンポーネントは、panDownを監視するためにember-gesturesを使用します。イベントが発生すると、ブロックはブラウザをアクティビティの詳細ページにリダイレクトします。

#app/controllers/activities.js 
import Ember from 'ember'; 

export default Ember.Controller.extend({ 

}); 

---

#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("panDown"); 
    this.transitionTo('activity', this.get('activity')); 
    } 
}); 

---

#app/components/carousel-block.js 
import Ember from 'ember'; 

export default Ember.Component.extend({ 
}); 

私は（panDownイベントを発生させる）活動ルートをロードし、その上に下にスワイプした場合、私は、コンソールにこのエラーが表示されます。

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 

Answer 1

コンポーネントからtransitionTo（）を呼び出すことはできません。代わりにアクションを送信してコントローラからの移行を行うのが最善の方法です。

export default Component.extend(RecognizerMixin, { 
    recognizers: 'pan', 
    panDown() { 
    console.log("panDown"); 
    this.attrs.showDetailsAction(this.get('activity')); 
    } 
}); 

そして、あなたのコントローラにアクションを定義します。

export default Ember.Controller.extend({ 
    actions: { 
    showDetails(activityData) { 
     this.transitionToRoute('activity', activityData); 
    } 
    } 
}); 

そして、あなたのコンポーネントにアクションを渡す：

{{carousel-block activity=activity showDetailsAction=(action 'showDetails')}}