我的目标是在我的页面上显示一个花哨的“加载…”图形,而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'); } } });
但是当我这样做,我得到这个错误:
未捕获错误:没有任何操作“displayLoading”.如果您确实处理该操作,则可能会由控制器中的操作处理程序返回true导致此错误,从而导致操作发生.
所以我的问题是我可以在哪里定义这个操作,以便我的加载方法能够调用它?
请注意,尝试this.send(‘displayLoading’)给了我这个错误:
由于您的应用尚未完成转换到其第一条路线,因此无法触发操作“displayLoading”.要在转换期间触发对目标路由的操作,可以在传递给model / beforeModel / afterModel钩子的Transition对象上调用.send().
更新:我可以在路由本身捕获此操作,但是我仍然无法调用我的控制器上的操作.
更新#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',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'); }