Могу ли я добавить условные события на компоненты Svelte?

Question

Возможно ли событие быть запущенным при условии, определенном в родительском компоненте?

У меня есть компонент ввода, где я хочу захватить ввод.. иногда, но большую часть времени я не хочу, чтобы событие срабатывало

   //App.html
   <Input on:inputData="doStuff(event)" fireEvent=true />    

   //Input.html
   <input bind:value=value (fireEvent ? on:keyup='fire("inputData", { value })' : false )/>

В настоящее время происходит то, что fireEvent игнорируется и on:keyup всегда пожары

ОБНОВИТЬ
Я изменил keyup в вызов функции, где я проверил параметр перед запуском события, он работает, но это немного странно

//App.html
<Input on:inputData='doStuff(event.value)' fireEvent={true} />
 ...
  methods: {
  doStuff(text) {
    console.log('here is the stuff', text);
  }

//Input.html
<input bind:value=value on:keyup='setData({ value })'/>
...
methods: {
  setData(text) {
    if(this.get().fireEvent) {
      this.fire("inputData", text)
    }
  }
}

Кто-нибудь получил более красивое решение этой проблемы?

Answer 1

Я не знаю, почему я не подумал об этом, но это именно то, что onupdate для

//App.html
<Input on:inputData='doStuff(event.value)' fireEvent={true} />
     ...
methods: {
 doStuff(text) {
   console.log('here is the stuff', text);
 }

//Input.html
<input bind:value=value />
...
onupdate({ changed, current, previous }) {
  if(this.get().fireEvent) {
    this.fire("inputData", current)
  }

Answer 2

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

      <button use:conditionalEvent({condition: foo, event: 'click', callback: bar})>...</button>

...

function conditionalEvent(node, {condition, event, callback}) {
    if (condition) {
        node.addEventListener(event, callback);
    }

    return {
        destroy() {
            node.removeEventListener(event, callback)
        } 
    }
}

Разметка могла бы быть менее подробной, если бы она была только для одного обратного вызова или типа события, но вы поняли. Если условие может измениться при вводе данных пользователем, вы также можете вернуть функцию обновления:

      function changingCondition(node, {condition, event, callback}) {
    function update(condition) {
        if (condition) {
            node.addEventListener(event, callback);
        } else {
            node.removeEventListener(event, callback);
        }
    }

    update(condition);

    return {
        update,
        destroy() {
            node.removeEventListener(event, callback)
        } 
    }
}

И обновление будет запускаться всякий раз, когда conditionизменения.

Answer 3

Я попробовал следующее, и это сработало. обратите внимание на нижний регистр 'fireevent'. Заглавная буква скинула его. Естественно, вам придется изменить его на:inputData и т. Д.

 methods: {
     test(evt) {
  console.log('evt.fireEvent', evt.target.getAttributeNode("fireEvent").value);
  if (evt.target.getAttributeNode("fireevent").value && evt.target.getAttributeNode("fireevent").value=="true")
      console.log('do the happy dance');
  else
      console.log('do NOTHING');

     }
 }

<button on:click="test(event)" fireevent="false">Test</button>