web-dev-qa-db-fra.com

Handlebarsjs vérifie si une chaîne est égale à une valeur

Est-il possible, dans le guidon, de vérifier si une chaîne est égale à une autre valeur sans enregistrer un assistant? Je n'arrive pas à trouver quoi que ce soit d’intéressant à cet égard dans la référence Guidons.

Par exemple:

{{#if sampleString == "This is a string"}}
...do something
{{/if}}
stringhandlebars.jslogical-operators
16
colmulhall

Il semble que vous ne pouvez pas le faire "directement"

Essayez d'utiliser helper, pourquoi pas?

S'inscrire helper dans votre code javascript:

Handlebars.registerHelper('ifEquals', function(arg1, arg2, options) {
    return (arg1 == arg2) ? options.fn(this) : options.inverse(this);
});

Utiliser dans le modèle:

{{#ifEquals sampleString "This is a string"}}
    Your HTML here
{{/ifEquals}}

Plus de détails ici: Opérateur logique dans un handlebars.js {{#if}} conditionnel

UPD: Une autre manière:

supposons que vos données sont:

var data = {
    sampleString: 'This is a string'
};

Puis (avec jQuery):

$.extend(data, {isSampleString: function() {
    return this.sampleString ==  'This is a string';}
});

Un modèle d'utilisation:

{{#if isSampleString}}
    Your HTML here
{{/if}}
24
Mihail

Je voudrais juste utiliser des aides comme ceci:

Handlebars.registerHelper('ifeq', function (a, b, options) {
    if (a == b) { return options.fn(this); }
    return options.inverse(this);
});

Handlebars.registerHelper('ifnoteq', function (a, b, options) {
    if (a != b) { return options.fn(this); }
    return options.inverse(this);
});

Puis dans votre code:

{{#ifeq variable "string"}} 
    ... do this ... 
{{/ifeq}}
{{#ifnoteq variable "string"}} 
    ... do this ... 
{{/ifnoteq}}
5
Pablo Varando

La réponse précédente avec match ne fonctionne pas pour moi, je reçois une erreur sur l'instruction if (quelque chose comme «ne doit avoir qu'un argument»).

Cependant, je viens de trouver la solution ici sans avoir à écrire d'aide supplémentaire:

{{#if (eq person "John")}} hello {{/if}}
4
Kerhael

Nous venons d’arriver à cette publication après une recherche sur Google sur la façon de vérifier si une chaîne est égale à une autre chaîne.

J'utilise HandlebarsJS dans NodeJS côté serveur, mais j'utilise également les mêmes fichiers de modèle sur le serveur en utilisant la version de navigateur de HandlebarsJS pour l'analyser. Cela signifiait que si je voulais un assistant personnalisé, je devrais le définir à deux endroits distincts ou assigner une fonction à l'objet en question - trop d'effort !!

Ce que les gens oublient, c'est que certains objets possèdent des fonctions héritées pouvant être utilisées dans le modèle moustache. Dans le cas d'une chaîne:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match

Un tableau contenant l'intégralité du résultat de la correspondance et les résultats correspondants capturés entre parenthèses; NULL s'il n'y a pas de correspondance.

Nous pouvons utiliser cette méthode pour renvoyer un tableau de correspondances ou null si aucune correspondance n'a été trouvée. C’est parfait, car vous pouvez consulter la documentation de HandlebarsJS http://handlebarsjs.com/builtin_helpers.html

Vous pouvez utiliser l'auxiliaire if pour restituer un bloc de manière conditionnelle. Si son argument renvoie false, undefined, null, "", 0 ou [], Handlebars ne rendra pas le bloc.

Alors...

{{#if your_string.match "what_youre_looking_for"}} 
String found :)
{{else}}
No match found :(
{{/if}}

METTRE À JOUR: 

Après avoir testé sur tous les navigateurs, cela ne fonctionne pas sur Firefox. HandlebarsJS passe les autres arguments à un appel de fonction, ce qui signifie que lorsque le fichier String.prototype.match est appelé, le deuxième argument (c’est-à-dire les indicateurs Regexp pour l’appel de la fonction de correspondance selon la documentation ci-dessus) semble être transmis. Firefox considère cela comme une utilisation déconseillée de String.prototype.match et rompt ainsi.

Une solution de contournement consiste à déclarer un nouveau prototype fonctionnel pour l'objet String JS} et à l'utiliser à la place:

if(typeof String.includes !== 'function') {
    String.prototype.includes = function(str) {
        if(!(str instanceof RegExp))
            str = new RegExp((str+'').escapeRegExp(),'g');
        return str.test(this);
    }
}

Assurez-vous que ce code JS est inclus avant vous exécutez votre fonction Handlebars.compile (), puis dans votre modèle ...

{{#your_string}}
    {{#if (includes "what_youre_looking_for")}} 
        String found :)
    {{else}}
        No match found :(
    {{/if}}
{{/your_string}}
3
Jon

Vous ne pouvez pas comparer directement les chaînes du guidon et vous devez utiliser un assistant. J'ai essayé les solutions ci-dessus avec mon application Koa et je n'ai pas pu enregistrer l'assistant. Le code ci-dessous a fonctionné pour moi et je pense que cela devrait également fonctionner pour les applications express. J'espère que ça aidera quelqu'un.

Code dans server.js 

var handlebars = require('koa-handlebars');

const isEqualHelperHandlerbar = function(a, b, opts) {
            if (a == b) {
                return opts.fn(this) 
            } else { 
                return opts.inverse(this) 
            } 
        }
        
app.use(handlebars({
    viewsDir: './app/views',
    layoutsDir: './app/views/layouts',
    defaultLayout: 'main',
    helpers : {
        if_equal : isEqualHelperHandlerbar
    }
}));

Code dans le fichier HBS où fruit est la variable à comparer:  

 <select id={{fruit}}>
   <option >Choose...</option>
   <option value="Apple" {{#if_equal fruit "Apple"}} selected {{/if_equal}}>Apple</option>
   <option value="mango" {{#if_equal fruit "mango"}} selected {{/if_equal}} >Mango</option>
 </select>

1
Ojus sangoi

Handlebars a un opérateur conditionnel appelé 'égal' qui prend deux paramètres: 

1.La variable

2. Que vérifie-tu si la variable contient?.

Par exemple, pour vérifier si "status" contient "Full Time":

{{#equal status "Full Time"}}  //status is the variable and Full Time is the value your checking for.
    code to be executed
{{else}}
    code to be executed
{{/equal}}
0
Mekanic

Un cas courant pour une fonction d'assistance simple et réutilisable consiste à renvoyer string1 si les valeurs sont égales et string2 si elles ne le sont pas.

Exemple:  

Helper (appelons-le "ifEqual" et envoyons 4 paramètres):

helpers: {

    ifEqual: function (obj, value, trueString, falseString) {
            return ( (obj===value) ? trueString : falseString );
}

Utilisation du modèle:

Pour cet exemple, supposons que le modèle reçoive un objet "transaction" avec une propriété "transactionType": { transactionType: "expense", description: "Copies" } 

Supposons que notre modèle comporte un <select> pour le type de transaction, avec divers <option>s comme indiqué. Nous voulons utiliser le guidon pour présélectionner l'option qui coïncide avec la valeur de transactionType.

Notre nouvel assistant {{ ifEqual }} est utilisé pour insérer "sélectionné" pour le <option> avec la valeur correspondante de "dépense". 

<select required id="selTransactionType" name="selTransactionType" class="form-control" onchange='transactionTypeChanged()'>
   <option value='hourly' {{ ifEqual transaction.transactionType "hourly" "selected" "" }} >Hourly fee</option>
   <option value='flat' {{ ifEqual transaction.transactionType "flat" "selected" "" }} >Flat fee</option>
   <option value='expense' {{ ifEqual transaction.transactionType "expense" "selected" "" }} >Expense</option>
   <option value='payment' {{ ifEqual transaction.transactionType "payment" "selected" "" }} >Payment</option>
   <option value='credit' {{ ifEqual transaction.transactionType "credit" "selected" "" }} >Credit</option>
   <option value='debit' {{ ifEqual transaction.transactionType "debit" "selected" "" }} >Debit</option>
</select>
0
Jeff Matthews

Dans le guidon, les parenthèses sont utilisées pour appeler le premier élément répertorié en tant que fonction, en utilisant les éléments suivants (facultatif) comme paramètres. Ainsi, la syntaxe de Ember PEUT être utilisée sans Ember, à condition que vous puissiez définir le contexte vous-même. Par exemple:

    context.eq = function(param1, param2) {
        return param1 === param2;
    }

    context.notEq = function(param1, param2) {
        return param1 !== param2;
    }

Une fois que vous avez fait cela, vous pouvez utiliser les opérations de bloc standard {{#if}} et {{#unless}}:

{{#if (eq someVar "someValue") }}

Faites attention de ne pas changer de contexte avec {{with}} ou lorsque vous utilisez des partiels en ligne. Vous pouvez perdre la trace de votre fonction "eq" définie. Le mode de travail garanti, quels que soient les nouveaux contextes:

{{#if (@root.eq someVar "someValue") }}
0
Joel Kozikowski