Ember evented on error: Assertion Failed: on called without valid event names
Ember evented on error: Assertion Failed: on called without valid event names
我的 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: Assertion Failed: on called without valid event names error.js:40
我试过重命名事件,但找不到事件名称错误的原因。
我还尝试为 on
方法设置三个参数,但它仍然存在事件名称问题。
我错过了什么?
编辑:
我做了一个 Ember 旋转显示事件的范围是组件。
我想从任何地方抓住他们;
比如从服务触发事件并在路由中捕获它。
https://ember-twiddle.com/ce22cc0a542e8e0997a1ad57a4a9688c?fullScreen=true
你可以这样使用它:
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 搜索中,或使用调试器查找有关失败原因的更多信息)
更新:扩展你的 twiddle 以让 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');
})
});
我的 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: Assertion Failed: on called without valid event names error.js:40
我试过重命名事件,但找不到事件名称错误的原因。
我还尝试为 on
方法设置三个参数,但它仍然存在事件名称问题。
我错过了什么?
编辑:
我做了一个 Ember 旋转显示事件的范围是组件。
我想从任何地方抓住他们;
比如从服务触发事件并在路由中捕获它。
https://ember-twiddle.com/ce22cc0a542e8e0997a1ad57a4a9688c?fullScreen=true
你可以这样使用它:
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 搜索中,或使用调试器查找有关失败原因的更多信息)
更新:扩展你的 twiddle 以让 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');
})
});