Ember.js 余烬,要重定向的组件
在我的ember应用程序中,我有一个Ember.js 余烬,要重定向的组件,ember.js,dom-events,ember-cli,gesture,Ember.js,Dom Events,Ember Cli,Gesture,在我的ember应用程序中,我有一个活动路线,带有相应的路线、控制器和一些组件,模板包含: {{#each activities as |activity|}} <li>{{carousel-block activity=activity}}</li> {{/each}} {{carousel activities=model}} carousel活动包含: {{#each activities as |activity|}} <li>{
活动
路线,带有相应的路线、控制器和一些组件,模板包含:
{{#each activities as |activity|}}
<li>{{carousel-block activity=activity}}</li>
{{/each}}
{{carousel activities=model}}
carousel活动
包含:
{{#each activities as |activity|}}
<li>{{carousel-block activity=activity}}</li>
{{/each}}
块组件用于监视panDown
,当事件发生时,块会将浏览器重定向到“活动详细信息”页面
#app/controllers/activities.js
import Ember from 'ember';
export default Ember.Controller.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
不能从组件调用transitionon()。最好的方法是发送一个操作,这将从控制器进行转换
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')}}
不能从组件调用transitionon()。最好的方法是发送一个操作,这将从控制器进行转换
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')}}
我是否应该将模板中的操作也传递给
旋转木马活动
和{{{carousel activities activities=model showtailsaction=(操作“showtails”)}
?是的,对不起。因此,您将执行{{carousel activities activities=model showDetailsAction=(action'showDetails')}}
,然后{{{carousel block activity=activity showDetailsAction=attrs.showDetailsAction}
我是否应该将模板中的操作也传递给carousel activities
{{carousel activities activities=model showDetailsAction=(action'showDetails')}?是的,对不起。所以您要执行{{{carousel activities activities=model showDetailsAction=(action'showDetailsAction')}
然后执行{{carousel block activity=activity showDetailsAction=attrs.showDetailsAction}