從主動點擊事件調用多個功能

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

這類似於@娟的下面一個人爲的例子，但你可以有一個自定義事件觸發另外兩個。

模板

<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

您可以觸發只有一個代理事件：

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(); 
}); 

Answer 3

Brett的答案是一個很好的 - 在大多數情況下，我建議。如果你想這樣做在很多情況下，你可以抽象出來，像這樣：

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>

修改原型這樣添加你需要的是完全鼓勵額外的功能。