Ember，要重定向的组件

Question

在我的 ember 应用程序中，我有一个 activities 路由，以及相应的路由、控制器和一些组件，模板包含：

{{carousel-activities activities=model}}

carousel-activities 包含：

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

carousel-block包含一些HBS来显示每个activity的内容：

<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>

块组件使用 ember-gestures 监视 panDown，当事件发生时，块会将浏览器重定向到 activity 详细信息页面。

#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')}}

Ember，要重定向的组件

Ember, component to redirect

ember.js

dom-events

ember-cli

gesture