Вызов нескольких функций из ractive по клику

Можно ли запустить две функции ractive с событием по щелчку. Я предполагал, что он попытается вести себя так же, как onclick, используя точку с запятой, но он не запускает ни одну из функций.

Шаблон:

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

JS:

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

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

Я пробовал через запятую и через пробел. Каким будет правильный способ заставить обе эти функции запускаться из одного события по щелчку.


javascript ractivejs
person silverlight513    schedule 15.05.2015    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Это надуманный пример, похожий на приведенный ниже @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');
});
person Brett    schedule 15.05.2015

arrow_upward
2
arrow_downward

Ответ Бретта хороший - я бы рекомендовал его в большинстве ситуаций. Если вы хотите сделать это во многих ситуациях, вы можете абстрагироваться следующим образом:

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>

Изменение прототипа таким образом, чтобы добавить дополнительные функции, которые вам нужны, полностью приветствуется.

person Rich Harris    schedule 16.05.2015
comment
Изменение прототипа таким образом, чтобы добавить дополнительные функции, которые вам нужны, настоятельно рекомендуется. Я чувствую, что проекту Ractive нужно место для перечисления всех этих полезных миксинов, чтобы люди могли знать о них и использовать их при необходимости. возникает. - person pembeci; 16.05.2015

arrow_upward
1
arrow_downward

Вы можете запустить только одно прокси-событие:

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();
});
person Juan Marcos Armella    schedule 15.05.2015