[英]Calling multiple functions from a ractive on-click
是否可以通過單擊事件來觸發兩個活動功能。 我以為它會使用半冒號嘗試以與onclick相同的方式運行,但不會觸發任何功能。
模板:
<div on-click="hello; world;"></div>
JS:
Ractive.on('hello', function(){
console.log('hello');
});
Ractive.on('world', function(){
console.log('world');
});
我嘗試用逗號分隔和空格分隔。 從一個單擊事件中觸發這兩個功能的正確方法是什么?
這是一個人為的示例,類似於下面的@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');
});
布雷特的答案是一個很好的答案-在大多數情況下,我建議這樣做。 如果您想在許多情況下執行此操作,可以將其抽象如下:
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>
完全鼓勵像這樣修改原型以添加所需的額外功能。
您只能觸發一個代理事件:
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();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.