Comment avoir si « chaîne === chaîne » dans un template ?

Dev
1

Dans mon plugin, je souhaite avoir une instruction if dans un modèle, qui évalue si une chaîne correspond à une valeur.

Comme ceci :

{{#each groups as |group|}}
  {{#if group.name === "AwesomeName"}}
      <div>Il y a une correspondance !</div>
  {{/if}}
{{/each}}

Comment puis-je faire cela dans Discourse ?

Je comprends qu’utiliser directement {{if}} ne fonctionne pas dans Ember/Handlebars. Il semble que je doive enregistrer un helper. Quelque chose comme ceci :

plugin/assets/javascripts/discourse/helpers/eq/js/es6

import { registerHelper } from 'discourse-common/lib/helpers';

registerHelper('eq', function(arg1, arg2) {
     if (arg1 === arg2) {
         return true
    } else {
       return false
    }
})

plugin/assets/javascripts/templates/components/my-component.hbs

{{#each groups as |group|}}
  {{#eq group.name "AwesomeName"}}
      <div>Il y a une correspondance !</div>
 {{/eq}}
{{/each}}

Cela ne fonctionne pas. (Aucune erreur n’est indiquée.)

J’ai essayé la solution ici, qui tente d’utiliser “makeBoundHelper”, mais cela ne fonctionne pas non plus pour moi — dans ce cas, j’obtiens des erreurs indiquant que “makeBoundHelper” n’est pas une fonction.

Je souhaite simplement pouvoir utiliser une instruction if pour comparer une chaîne à une valeur. Comment faire ?

1 « J'aime »
2

Vous voulez utiliser Computed Properties - The Object Model - Ember Guides

Consultez le code source de Discourse pour connaître leur style de code spécifique.

2 « J'aime »
3

Les propriétés calculées sont intéressantes, mais je ne vois pas le lien avec ce sur quoi je me concentre ici.

Dans mon exemple, la propriété clé est group.name, et je veux évaluer dans le modèle si cette propriété correspond à “AwesomeName”. Je ne suis pas sûr de la façon dont les propriétés calculées permettraient de contourner la nécessité d’utiliser un type particulier d’instruction {{if}} dans le modèle, ce que je n’ai pas encore réussi à déterminer.

4

Les modèles Handlebars ne disposent que d’une logique booléenne rudimentaire. Vous pouvez effectuer des vérifications sur la présence de valeurs truthy.

Pour des opérations plus complexes, vous devez implémenter la logique dans le fichier Ember JS associé au modèle.

Par exemple, si vous avez un modèle situé sous templates/components/my-component.hbs, vous devrez utiliser le fichier JS components/my-component.js pour effectuer le calcul.

Dans ce fichier, vous écririez quelque chose comme ceci :

import discourseComputed from "discourse-common/utils/decorators";
import Component from "@ember/component";

export default Component.extend({
  @discourseComputed("string1", "string2")
  property(string1, string2) {
    return string1 === string2;
  }
});

property est simplement le nom d’une fonction, mais il peut être n’importe quel nom.

Ensuite, dans le modèle, vous écririez quelque chose comme ceci :

{{#if property}}
 blah blah...
{{/if}}

Cela récupère la propriété calculée depuis le fichier JS et affiche le contenu du bloc #if uniquement si property renvoie true.

4 « J'aime »
5

Merci pour cela — cela aide à clarifier beaucoup de choses.

Je n’ai pas encore tout à fait réussi à faire fonctionner cela, en partie parce que je ne trouve pas d’exemples en ligne montrant l’utilisation de propriétés calculées pour ce type d’opération.

Dans mon cas, dans mon plugin, j’apporte la modification dans le modèle d’index des groupes. Donc dans le fichier : plugin/assets/javascripts/discourse/groups/index.hbs (j’y ai simplement placé tout le code de l’index des groupes et ajouté mes modifications par-dessus.)

Voulez-vous dire que le fichier JS contenant la propriété calculée devrait se trouver dans un fichier que je crée, à savoir : plugin/assets/javascripts/discourse/groups/index.js ? Ou puis-je simplement placer ce code dans un initialiseur ?

Voici ma meilleure tentative pour implémenter ce dont vous parlez — est-ce ce à quoi vous pensiez :

js :

export default Component.extend({
  @discourseComputed("group.name", "Amazing_Name")
  property(group.name, Amazing_Name) {
    return group.name === Amazing_Name
  }
})

hbs :

 {{#if property}}
    <div>Oui, il y a une correspondance !</div>
 {{/if}}

Ou vouliez-vous dire que je devrais littéralement entrer des valeurs générales comme “string1” et “string2” dans @discourseComputed, puis modifier le modèle en {{#if property group.name "Amazing_Name"}} ? (Seule cette méthode me permettrait de prendre en compte chaque valeur dynamique dans le modèle.)

Je n’ai pas encore réussi à faire fonctionner l’une ou l’autre approche.

Merci pour votre aide.

2 « J'aime »
6

Avez-vous réussi à faire fonctionner cela ? J’aimerais beaucoup avoir un exemple détaillé expliquant comment procéder (quoi ajouter comme contenu, dans quel fichier, et à quel endroit dans ce fichier si cela est pertinent).

1 « J'aime »
7

Je n’ai jamais réussi à faire fonctionner cela moi-même et j’ai dû passer à autre chose. Cela semblait absurde de passer autant de temps sur ce qui serait normalement un exercice de codage de base. Dans mon cas, je pense qu’il s’agissait probablement d’une petite erreur de syntaxie ici et d’une autre là, mais je n’ai jamais trouvé d’exemples complets et fonctionnels. Je serais également reconnaissant de recevoir un exemple complet et fonctionnel montrant comment faire un if string === string.

2 « J'aime »