Question

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

模板：

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

JS：

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

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

我尝试过逗号分隔和空格分隔。从一个点击事件中触发这两个函数的正确方法是什么。

Answer 1

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>

完全鼓励修改这样的原型以增加您需要的额外功能。

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

这是一个与下面的@ 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');
});

通过点击式

3 个答案: