1
votes

Puis-je ajouter des événements conditionnels sur des composants svelte?

Est-il possible qu'un événement soit déclenché sur une condition définie dans le composant parent?

J'ai un composant d'entrée où je veux capturer l'entrée .. parfois, mais la plupart du temps, je ne veux pas que l'événement se déclenche

//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)
    }
  }
}

Ce qui se passe actuellement est que fireEvent est ignoré et on: keyup se déclenche toujours

UPDATE
J'ai changé le keyup en un appel de fonction où j'ai vérifié le paramètre avant de déclencher l'événement, cela fonctionne mais c'est un peu farfelu

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

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

Quelqu'un a-t-il une plus jolie solution à ce problème?

svelte events

0 commentaires

3 Réponses :

0
votes

J'ai essayé ce qui suit et cela a fonctionné. notez la minuscule «fireevent». La lettre majuscule l'a jeté. Naturellement, vous devrez le changer en on: inputData etc.

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

	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');

	    }
	}

1 commentaires

ouais j'avais déjà essayé cela avec une méthode comme celle-ci et cela fonctionne mais je n'aime pas à quoi ça ressemble .. aussi j'ai réalisé que mon problème est résolu par onupdate

2
votes

Je ne sais pas pourquoi je n'y ai pas pensé, mais c'est exactement ce que on update est pour

//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)
  }

0 commentaires

2
votes

Très tard à la fête, mais j'ai eu un problème similaire et j'ai fini par le résoudre par une action. Pour le mien, je devais attacher un écouteur de clic à un bouton uniquement si une certaine condition était véridique. Un exemple plus générique pourrait être:

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

Le balisage pourrait être moins détaillé s'il ne concernait qu'un seul rappel ou type d'événement, mais vous obtenez le point. Si la condition peut changer avec l'entrée de l'utilisateur, vous pouvez également renvoyer une fonction de mise à jour:

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

Et la mise à jour sera exécutée chaque fois que la condition change. p>

0 commentaires