ember在发生错误时发生事件:断言失败:在调用时没有有效的事件名称

时间:2018-08-20 08:44:10

标签: javascript ember.js javascript-events ember-2.0.0

我的ember 2.18应用程序中有一个控制器,我想让它侦听应用程序中某处触发的某些事件“ myEventName”,以更改模型属性。

根据the API docs for this version捕获发出的事件的方式如下:

import Evented from '@ember/object/evented';
import Controller from '@ember/controller';
// extend some object, like a Controller
const myExtendedObject = Controller.extend(Evented, { 
    // stuff ...
     });

myExtendedObject.on('myEventName', function (args) {  
    console.log("catch importDone  ok", args); 
    });
export default myExtendedObject;

该代码可通过ember build dev很好地编译, 但是在浏览器的JS控制台中,我收到此错误消息:

  

错误:断言失败:调用时没有有效的事件名称error.js:40

我尝试重命名事件,但是我找不到事件名称错误的原因。 还尝试将3个参数设置为“ on”方法,但是它仍然会与事件名称有关。 我想念什么?

编辑: 我做了余烬,显示事件的范围是组件。 我想从任何地方抓住他们。 例如从服务触发事件并在路由中捕获事件。

https://ember-twiddle.com/ce22cc0a542e8e0997a1ad57a4a9688c?fullScreen=true

1 个答案:

答案 0 :(得分:1)

您可以像这样使用它:

import { on } from '@ember/object/evented';

export default Controller.extend(Evented, {
  init() {
    this._super(...arguments);
    this.trigger('greet');
  },

  myGreetImplementation: on('greet', function() {
    console.log('hello');
  })
});

另一个示例:使用服务来管理用户设置并订阅更改:

export default Service.extend(Evented, {
  ...
  changeProfilePicture() {
    ...
    this.trigger('profilePictureChanged', ... event parameters ...);
  }
});

然后,您可以使用on方法在任何地方观看此类事件:

 export default Controller.extend({
  userSettings: service(),

  init() {
    this._super(...arguments);
    this.get('userSettings').on('profilePictureChanged', this, this.profilePictureChanged);
  },

  profilePictureChanged(... event parameters ...) {
   ...
  }
});

您收到的错误来自这里: https://github.com/emberjs/ember.js/blob/6fc89cdf13124d88b8ae6adf99bb02a8c0cdf508/packages/ember-metal/lib/events.ts#L211 (您可以将错误消息粘贴到github搜索中,或使用调试器来查找有关某些失败原因的更多信息)


更新:扩展您的想法,以使Controller在服务事件上注册:

import Ember from 'ember';
import { inject as service } from '@ember/service';
import { on } from '@ember/object/evented';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  myService: service(),
  init() {
    this._super(...arguments);
    this.get('myService').on('mycall', this, this.mycallHandler);
  },
  mycallHandler: on('mycall', function() {
    console.log('here we are');
  })
});