Activer/Désactiver re-active un lien hypertexte dans Meteor

Question

Scénario:

J'ai un lien hypertexte simple sur la barre latérale d'un tableau de bord.

<a href="/client/workspace"> 
    <i class="fa fa-laptop"></i> <span>Workspace</span> 
</a> 

Problème:

L'hyperlien doit être cliquer-activée uniquement lorsque CONDITION est true, sinon il doit être désactivé.

Des suggestions? Merci d'avance.

NOTE: L'utilisation Meteor + blaze ne

Answer 1

Si vous insistez pour avoir un pour le lien, supprimez l'attribut href et le faire agir comme un bouton comme celui-ci:

<a class="myLink" role="button" link="/client/workspace"> 
    <i class="fa fa-laptop"></i> <span>Workspace</span> 
</a> 

Définir son comportement comme celui-ci:

Template.yourTemplate.events({ 
    '.myLink': function (event) { 
     event.preventDefault(); 
     if (CONDITION) { 
      // your code to redirect to event.target.link 
     } 
    } 
}) 

Answer 2

Idéalement, un <button> peut vraiment être disabled (simplement définir la valeur d'attribut disabled au résultat de votre condition).

Un lien <a> peut toujours être cliqué, donc en fonction de ce que l'interface utilisateur vous exactement que vous voulez, on peut imaginer:

• cacher le lien derrière un transparent (peut-être avec une certaine opacité) <div>, afin qu'il puisse ne plus être cliqué. Le positionnement du <div> doit être fait avec soin, tandis que sa présence/absence peut être facilement définie (par exemple en utilisant une classe qui a le style display: none).
• Écouter l'événement "click" sur le lien et empêcher le comportement par défaut (c'est-à-dire event.preventDefault(), où event est le premier argument de l'écouteur) en fonction du résultat de votre condition.