从激活的单击中调用多个功能

Question

是否可以通过单击事件来触发两个活动功能。 我以为它会使用半冒号尝试以与onclick相同的方式运行，但不会触发任何功能。

模板：

<div on-click="hello; world;"></div>

JS：

Ractive.on('hello', function(){
    console.log('hello');
});

Ractive.on('world', function(){
    console.log('world');
});

我尝试用逗号分隔和空格分隔。 从一个单击事件中触发这两个功能的正确方法是什么？

Answer 1

这是一个人为的示例，类似于下面的@Juan，但是您可能有一个自定义事件触发其他两个事件。

模板

<div on-click="custom"></div>

JS

Ractive.on('custom', function() {
  Ractive.fire('hello');
  Ractive.fire('world');
});

Ractive.on('hello', function(){
  console.log('hello');
});

Ractive.on('world', function(){
  console.log('world');
});

Answer 2

布雷特的答案是一个很好的答案-在大多数情况下，我建议这样做。 如果您想在许多情况下执行此操作，可以将其抽象如下：

 Ractive.prototype.fireEvents = function () { var len = arguments.length; for ( var i = 0; i < len; i += 1 ) { this.fire( arguments[i], this.event ); } }; var ractive = new Ractive({ el: 'main', template: '#template' }); ractive.on({ foo: function () { alert( 'fired foo' ); }, bar: function () { alert( 'fired bar' ); }, baz: function () { alert( 'fired baz' ); } }); 

 <script src='http://cdn.ractivejs.org/latest/ractive.js'></script> <main></main> <script id='template' type='text/html'> <button on-click='fireEvents("foo","bar","baz")'>fire events</button> </script> 

完全鼓励像这样修改原型以添加所需的额外功能。

Answer 3

您只能触发一个代理事件：

http://docs.ractivejs.org/latest/proxy-events

但也许您可以：

<div on-click="hello" ></div>
<div on-click="world" ></div>
<div on-click="helloWorld" ></div>

---

function hello(){
    console.log('hello');
}

function world(){
    console.log('world');

}
Ractive.on('hello', function(){
    hello();
});

Ractive.on('world', function(){
   world();
});

Ractive.on('helloWorld', function(){

  hello(); world();
});