我的目标是在我的页面上显示一个花哨的"loading ..."图形,而Ember通过Ember路线获取模型数据.
这导致我http://emberjs.com/guides/routing/loading-and-error-substates/.这激发了我在我的页面控制器上创建一个动作,它将在DOM中显示"加载"覆盖窗口.例如,这是我的控制器:
控制器/ users.js:
export default Ember.ArrayController.extend({ ... actions: { displayLoading: function() { // Show the DOM element that says "Loading..." }, ... } });
我想在我的数据加载时调用它,所以我然后定义一个路由如下:
路线/ users.js:
export default Ember.Route.extend({ model: function( params ) { return this.store.find('user', params ); }, actions: { loading: function(transition, originRoute) { transition.send('displayLoading'); } } });
但是,当我这样做时,我收到此错误:
Uncaught Error: Nothing handled the action 'displayLoading'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.
所以我的问题是我在哪里可以定义此操作,以便我的loading
方法可以调用它?
请注意,尝试this.send('displayLoading')
给了我这个错误:
Can't trigger action 'displayLoading' because your app hasn't finished transitioning into its first route. To trigger an action on destination routes during a transition, you can call .send() on the Transition object passed to the model/beforeModel/afterModel hooks.
.
更新:我能够在路线本身上捕捉到这个动作,但是我仍然无法在我的控制器上调用该动作.
更新#2:感谢@ kingpin2k的回答,我已经解决了这个问题.对于那些感兴趣的人,这是一个完整的解决方
控制器/ users.js:
export default Ember.ArrayController.extend( { actions: { showLoading: function() { this.set('isLoading', true); }, hideLoading: function() { this.set('isLoading', false); }, } });
路由器/ users.js:
export default Ember.Route.extend({ model: function( params ) { return this.store.find('user', params ); }, actions: { loading: function() { this.controllerFor('users').send('showLoading'); }, didTransition: function() { this.controllerFor('users').send('hideLoading'); } } });
一个关键的洞察力是我可以isLoading
在我的控制器上设置一个属性,它确定我的模态"加载..."窗口是否显示在Handlebars模板中.
使用controllerFor
,http://emberjs.com/api/classes/Ember.Route.html#method_controllerFor
loading: function(transition, originRoute) { var controller = this.controllerFor('foo'); controller.send('displayLoading'); }