Events 如何在Ractive初始化/默认设置中包含事件(而不是事件插件)?
我已经阅读了Ractive文档,我有点挠头,因为似乎默认事件初始化选项允许我做一些事情——创建新的事件类型——比我需要的要复杂得多,但相反,定义默认事件的简单(更常见?)任务没有挂钩 有人能建议如何提供可以为传统DOM事件触发的全局事件吗 例如: 我有一个由3部分组成的应用程序页面。我想定义一个getOptions事件,这样任何Events 如何在Ractive初始化/默认设置中包含事件(而不是事件插件)?,events,event-handling,ractivejs,Events,Event Handling,Ractivejs,我已经阅读了Ractive文档,我有点挠头,因为似乎默认事件初始化选项允许我做一些事情——创建新的事件类型——比我需要的要复杂得多,但相反,定义默认事件的简单(更常见?)任务没有挂钩 有人能建议如何提供可以为传统DOM事件触发的全局事件吗 例如: 我有一个由3部分组成的应用程序页面。我想定义一个getOptions事件,这样任何…都将由同一个函数处理。我不想在每个组件中定义该函数 我的直觉是这样做的: Ractive.events['getOptions'] = function(event){
…
都将由同一个函数处理。我不想在每个组件中定义该函数
我的直觉是这样做的:
Ractive.events['getOptions'] = function(event){
//logic for getting the options for the value in event.keypath
}
或者,如果我想要一个可以被覆盖的真正默认值
Ractive.default.events['getOptions'] = function(event){
//logic for getting the options for the value in event.keypath
}
但是我对文档的理解是,Ractive.events
和Ractive.default.events
不提供这一点,而是提供了一种定义新事件插件的方法,这些插件依赖于单独的触发机制:
Ractive.events.getoptions = function(node,fire){
//here goes logic for interacting with DOM event listeners, etc
}
//and then i would need to do this
ractive = Ractive.extend({...});
ractive.on('someOtherEventName',function(event){
//logic for getting the options for the value in event.keypath
});
//and then I could do this...
<select on-getoptions='someOtherEventName'>...</select>
Ractive.events.getoptions=函数(节点,火灾){
//下面是与DOM事件侦听器等交互的逻辑
}
//然后我需要做这个
racive=racive.extend({…});
ractive.on('someOtherEventName',函数(事件){
//获取event.keypath中值的选项的逻辑
});
//然后我可以这样做。。。
...
但是在这种情况下,从模板而不是从js ractive.fire()触发getoptions
像…
这样的东西有用吗?我觉得这很奇怪。我理解概念修正吗?如果没有,我错过了什么
有没有一种简单的方法可以实现第一个示例?
Ractive.events
指的是在dom和模板之间进行调解的自定义事件:
Ractive.events.banana = function( node, fire ) { ... };
<div on-banana="doSomething()"/>
基于事件的方法通常需要让视图层次结构中的根实例或公共父级跨子组件处理相同的事件:
var app = new Ractive({
template: "<componentA/><componentB/>",
oninit(){
this.on( '*.getOptions', ( event, arg ) => {
// any child component (at any depth)
// that fires a "getOptions" event will
// end up here
});
}
});
// in component A or B:
<select on-click="getOptions">...</select>
请注意,您必须调用this代码>在您还实现了oninit的任何组件中:
var Component = Ractive.extend({
oninit() {
// make sure we call the base or event listener won't happen!
this._super();
// do this component instances init work...
}
}
感谢@martypdx的上述快速响应!我没有考虑过使用原型,但这很有意义,而且在大多数情况下都会起作用。不过,您提到的组件中的事件冒泡功能是我希望利用的。有没有办法将其分配给原型以及真正的事件处理程序?@LindsayRyan:添加了使用原型注册事件listenerAwesome的示例-非常感谢!同时,我发现我并不是唯一一个对此感到疑惑的人:(可能对其他人也有帮助),但仍然不确定……现在我可以回到编码上来了:)
Ractive.prototype.oninit = function(){
this.on( 'getOptions', ( event ) => {
// handle any "getOptions" event that happens in the instance
});
}
var Component = Ractive.extend({
oninit() {
// make sure we call the base or event listener won't happen!
this._super();
// do this component instances init work...
}
}