web-dev-qa-db-fra.com

Opérateur logique dans un conditionnel handlebars.js {{#if}}

Existe-t-il un moyen dans JS de guidons d’intégrer des opérateurs logiques dans l’opérateur conditionnel de guidons standard.js? Quelque chose comme ça:

{{#if section1 || section2}}
.. content
{{/if}}

Je sais que je pourrais écrire mon propre assistant, mais je voudrais d’abord m'assurer de ne pas réinventer la roue.

javascripthandlebars.js
456
Mike Robinson

Ceci est possible en "trichant" avec un assistant de bloc. Cela va probablement à l'encontre de l'idéologie des personnes qui ont développé le guidon.

Handlebars.registerHelper('ifCond', function(v1, v2, options) {
  if(v1 === v2) {
    return options.fn(this);
  }
  return options.inverse(this);
});

Vous pouvez ensuite appeler l'assistant dans le modèle comme ceci

{{#ifCond v1 v2}}
    {{v1}} is equal to {{v2}}
{{else}}
    {{v1}} is not equal to {{v2}}
{{/ifCond}}
495
Nick Kitto

Prenant la solution un peu plus loin. Cela ajoute l'opérateur de comparaison.

Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {

    switch (operator) {
        case '==':
            return (v1 == v2) ? options.fn(this) : options.inverse(this);
        case '===':
            return (v1 === v2) ? options.fn(this) : options.inverse(this);
        case '!=':
            return (v1 != v2) ? options.fn(this) : options.inverse(this);
        case '!==':
            return (v1 !== v2) ? options.fn(this) : options.inverse(this);
        case '<':
            return (v1 < v2) ? options.fn(this) : options.inverse(this);
        case '<=':
            return (v1 <= v2) ? options.fn(this) : options.inverse(this);
        case '>':
            return (v1 > v2) ? options.fn(this) : options.inverse(this);
        case '>=':
            return (v1 >= v2) ? options.fn(this) : options.inverse(this);
        case '&&':
            return (v1 && v2) ? options.fn(this) : options.inverse(this);
        case '||':
            return (v1 || v2) ? options.fn(this) : options.inverse(this);
        default:
            return options.inverse(this);
    }
});

Utilisez-le dans un modèle comme celui-ci:

{{#ifCond var1 '==' var2}}

Coffee Script version

Handlebars.registerHelper 'ifCond', (v1, operator, v2, options) ->
    switch operator
        when '==', '===', 'is'
            return if v1 is v2 then options.fn this else options.inverse this
        when '!=', '!=='
            return if v1 != v2 then options.fn this else options.inverse this
        when '<'
            return if v1 < v2 then options.fn this else options.inverse this
        when '<='
            return if v1 <= v2 then options.fn this else options.inverse this
        when '>'
            return if v1 > v2 then options.fn this else options.inverse this
        when '>='
            return if v1 >= v2 then options.fn this else options.inverse this
        when '&&', 'and'
            return if v1 and v2 then options.fn this else options.inverse this
        when '||', 'or'
            return if v1 or v2 then options.fn this else options.inverse this
        else
            return options.inverse this
430
Jim

Le guidon prend en charge les opérations imbriquées. Cela offre beaucoup de flexibilité (et un code plus propre) si nous écrivons notre logique un peu différemment.

{{#if (or section1 section2)}}
.. content
{{/if}}

En fait, nous pouvons ajouter toutes sortes de logique:

{{#if (or 
        (eq section1 "foo")
        (ne section2 "bar"))}}
.. content
{{/if}}

Enregistrez simplement ces aides:

Handlebars.registerHelper({
    eq: function (v1, v2) {
        return v1 === v2;
    },
    ne: function (v1, v2) {
        return v1 !== v2;
    },
    lt: function (v1, v2) {
        return v1 < v2;
    },
    gt: function (v1, v2) {
        return v1 > v2;
    },
    lte: function (v1, v2) {
        return v1 <= v2;
    },
    gte: function (v1, v2) {
        return v1 >= v2;
    },
    and: function () {
        return Array.prototype.slice.call(arguments).every(Boolean);
    },
    or: function () {
        return Array.prototype.slice.call(arguments, 0, -1).some(Boolean);
    }
});
138
kevlened

prendre celui-ci un cran, pour ceux d'entre vous qui vivent sur le bord.

Gist : https://Gist.github.com/akhoury/9118682 Démo : Extrait de code ci-dessous

Aide au guidon: {{#xif EXPRESSION}} {{else}} {{/xif}}

un assistant pour exécuter une instruction IF avec n'importe quelle expression

  1. EXPRESSION est une chaîne correctement échappée
  2. Oui, vous AVEZ BESOIN DE pour échapper correctement aux littéraux de chaîne ou pour simplement alterner les guillemets simples et doubles.
  3. vous pouvez accéder à n’importe quelle fonction ou propriété globale, c.-à-d. encodeURIComponent(property)
  4. cet exemple suppose que vous ayez passé ce contexte à votre guidon template( {name: 'Sam', age: '20' } ), remarquez que age est un string, juste pour que je puisse faire une démonstration de parseInt() plus tard dans cet article.

Usage:

<p>
 {{#xif " name == 'Sam' && age === '12' " }}
   BOOM
 {{else}}
   BAMM
 {{/xif}}
</p>

Sortie

<p>
  BOOM
</p>

JavaScript: (cela dépend d'un autre assistant - continuez à lire) 

 Handlebars.registerHelper("xif", function (expression, options) {
    return Handlebars.helpers["x"].apply(this, [expression, options]) ? options.fn(this) : options.inverse(this);
  });

Aide au guidon: {{x EXPRESSION}}

Un assistant pour exécuter des expressions javascript

  1. EXPRESSION est une chaîne correctement échappée
  2. Oui, vous AVEZ BESOIN DE pour échapper correctement aux littéraux de chaîne ou pour simplement alterner les guillemets simples et doubles.
  3. vous pouvez accéder à n’importe quelle fonction ou propriété globale, c.-à-d. parseInt(property)
  4. cet exemple suppose que vous ayez passé ce contexte à votre guidon template( {name: 'Sam', age: '20' } ), age est un string à des fins de démonstration, cela peut être n'importe quoi ..

Usage:

<p>Url: {{x "'hi' + name + ', ' + window.location.href + ' <---- this is your href,' + ' your Age is:' + parseInt(this.age, 10)"}}</p>

Sortie:

<p>Url: hi Sam, http://example.com <---- this is your href, your Age is: 20</p>

JavaScript:

Cela semble un peu gros parce que j'ai développé la syntaxe et commenté presque chaque ligne pour plus de clarté

Handlebars.registerHelper("x", function(expression, options) {
  var result;

  // you can change the context, or merge it with options.data, options.hash
  var context = this;

  // yup, i use 'with' here to expose the context's properties as block variables
  // you don't need to do {{x 'this.age + 2'}}
  // but you can also do {{x 'age + 2'}}
  // HOWEVER including an UNINITIALIZED var in a expression will return undefined as the result.
  with(context) {
    result = (function() {
      try {
        return eval(expression);
      } catch (e) {
        console.warn('•Expression: {{x \'' + expression + '\'}}\n•JS-Error: ', e, '\n•Context: ', context);
      }
    }).call(context); // to make eval's lexical this=context
  }
  return result;
});

Handlebars.registerHelper("xif", function(expression, options) {
  return Handlebars.helpers["x"].apply(this, [expression, options]) ? options.fn(this) : options.inverse(this);
});

var data = [{
  firstName: 'Joan',
  age: '21',
  email: '[email protected]'
}, {
  firstName: 'Sam',
  age: '18',
  email: '[email protected]'
}, {
  firstName: 'Perter',
  lastName: 'Smith',
  age: '25',
  email: '[email protected]'
}];

var source = $("#template").html();
var template = Handlebars.compile(source);
$("#main").html(template(data));
h1 {
  font-size: large;
}
.content {
  padding: 10px;
}
.person {
  padding: 5px;
  margin: 5px;
  border: 1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script>

<script id="template" type="text/x-handlebars-template">
  <div class="content">
    {{#each this}}
    <div class="person">
      <h1>{{x  "'Hi ' + firstName"}}, {{x 'lastName'}}</h1>
      <div>{{x '"you were born in " + ((new Date()).getFullYear() - parseInt(this.age, 10)) '}}</div>
      {{#xif 'parseInt(age) >= 21'}} login here:
      <a href="http://foo.bar?email={{x 'encodeURIComponent(email)'}}">
                http://foo.bar?email={{x 'encodeURIComponent(email)'}}
        </a>
      {{else}} Please go back when you grow up. {{/xif}}
    </div>
    {{/each}}
  </div>
</script>

<div id="main"></div>

Moar

si vous voulez accéder à la portée de niveau supérieur, celle-ci est légèrement différente, l'expression est la jointure de tous les arguments, utilisation: dire les données de contexte ressemblent à ceci:

// data
{name: 'Sam', age: '20', address: { city: 'yomomaz' } }

// in template
// notice how the expression wrap all the string with quotes, and even the variables
// as they will become strings by the time they hit the helper
// play with it, you will immediately see the errored expressions and figure it out

{{#with address}}
    {{z '"hi " + "' ../this.name '" + " you live with " + "' city '"' }}
{{/with}}

Javascript:

Handlebars.registerHelper("z", function () {
    var options = arguments[arguments.length - 1]
    delete arguments[arguments.length - 1];
    return Handlebars.helpers["x"].apply(this, [Array.prototype.slice.call(arguments, 0).join(''), options]);
});

Handlebars.registerHelper("zif", function () {
    var options = arguments[arguments.length - 1]
    delete arguments[arguments.length - 1];
    return Handlebars.helpers["x"].apply(this, [Array.prototype.slice.call(arguments, 0).join(''), options]) ? options.fn(this) : options.inverse(this);
});
88
bentael

Il existe un moyen simple de faire cela sans écrire de fonction d'assistance ... Cela peut être fait complètement dans le modèle.

{{#if cond1}}   
  {{#if con2}}   
    <div> and condition completed</div>  
  {{/if}}
{{else}}   
  <div> both conditions weren't true</div>  
{{/if}}

Edit: Inversement, vous pouvez faire ou est en faisant ceci:

{{#if cond1}}  
  <div> or condition completed</div>    
{{else}}   
  {{#if cond2}}  
    <div> or condition completed</div>  
  {{else}}      
    <div> neither of the conditions were true</div>    
  {{/if}}  
{{/if}}

Edit/Note: Sur le site web du guidon: handlebarsjs.com, voici les valeurs de fausseté:

Vous pouvez utiliser l'assistant if pour restituer un bloc de manière conditionnelle. Si son argument renvoie false, undefined, null, "" ou [] (une valeur "falsy"), aucun 'cond' (comme cond1 ou cond2) ne sera considéré comme vrai.

29
jQwierdy

Un problème avec toutes les réponses postées ici est qu’elles ne fonctionnent pas avec les propriétés liées, c’est-à-dire que la condition if n’est pas réévaluée lorsque les propriétés impliquées changent. Voici une version légèrement plus avancée des liaisons de support d'aide. Il utilise la fonction bind de la source Ember, qui est également utilisée pour implémenter l'assistant normal Ember #if.

Celui-ci est limité à une propriété liée à gauche, comparée à une constante à droite, ce qui, à mon avis, convient à la plupart des tâches pratiques. Si vous avez besoin de quelque chose de plus avancé qu'une simple comparaison, alors il serait peut-être bon de commencer à déclarer certaines propriétés calculées et d'utiliser plutôt l'assistant normal #if.

Ember.Handlebars.registerHelper('ifeq', function(a, b, options) {
  return Ember.Handlebars.bind.call(options.contexts[0], a, options, true, function(result) {
    return result === b;
  });
});

Vous pouvez l'utiliser comme ceci:

{{#ifeq obj.some.property "something"}}
  They are equal!
{{/ifeq}}
19
devongovett

Solution améliorée fonctionnant essentiellement avec n'importe quel opérateur binaire (au moins les nombres, les chaînes ne fonctionnent pas bien avec eval, PRENEZ SOIN DE L'INJECTION DE SCRIPT ÉVENTUELLE SI UN OPÉRATEUR NON DÉFINI AVEC DES ENTRÉES UTILISATEUR):

Handlebars.registerHelper("ifCond",function(v1,operator,v2,options) {
    switch (operator)
    {
        case "==":
            return (v1==v2)?options.fn(this):options.inverse(this);

        case "!=":
            return (v1!=v2)?options.fn(this):options.inverse(this);

        case "===":
            return (v1===v2)?options.fn(this):options.inverse(this);

        case "!==":
            return (v1!==v2)?options.fn(this):options.inverse(this);

        case "&&":
            return (v1&&v2)?options.fn(this):options.inverse(this);

        case "||":
            return (v1||v2)?options.fn(this):options.inverse(this);

        case "<":
            return (v1<v2)?options.fn(this):options.inverse(this);

        case "<=":
            return (v1<=v2)?options.fn(this):options.inverse(this);

        case ">":
            return (v1>v2)?options.fn(this):options.inverse(this);

        case ">=":
         return (v1>=v2)?options.fn(this):options.inverse(this);

        default:
            return eval(""+v1+operator+v2)?options.fn(this):options.inverse(this);
    }
});
13
Vincent

Voici un lien vers l'aide de bloc que j'utilise: aide de bloc de comparaison . Il supporte tous les opérateurs standard et vous permet d'écrire du code comme indiqué ci-dessous. C'est vraiment très pratique.

{{#compare Database.Tables.Count ">" 5}}
There are more than 5 tables
{{/compare}}
7
CleanTheRuck

Voici une solution si vous souhaitez vérifier plusieurs conditions:

/* Handler to check multiple conditions
   */
  Handlebars.registerHelper('checkIf', function (v1,o1,v2,mainOperator,v3,o2,v4,options) {
      var operators = {
           '==': function(a, b){ return a==b},
           '===': function(a, b){ return a===b},
           '!=': function(a, b){ return a!=b},
           '!==': function(a, b){ return a!==b},
           '<': function(a, b){ return a<b},
           '<=': function(a, b){ return a<=b},
           '>': function(a, b){ return a>b},
           '>=': function(a, b){ return a>=b},
           '&&': function(a, b){ return a&&b},
           '||': function(a, b){ return a||b},
        }
      var a1 = operators[o1](v1,v2);
      var a2 = operators[o2](v3,v4);
      var isTrue = operators[mainOperator](a1, a2);
      return isTrue ? options.fn(this) : options.inverse(this);
  });

Usage:

/* if(list.length>0 && public){}*/

{{#checkIf list.length '>' 0 '&&' public '==' true}} <p>condition satisfied</p>{{/checkIf}}
7
Sateesh Kumar Alli

Semblable à la réponse de Jim mais utilisant un peu de créativité, nous pourrions aussi faire quelque chose comme ceci:

Handlebars.registerHelper( "compare", function( v1, op, v2, options ) {

  var c = {
    "eq": function( v1, v2 ) {
      return v1 == v2;
    },
    "neq": function( v1, v2 ) {
      return v1 != v2;
    },
    ...
  }

  if( Object.prototype.hasOwnProperty.call( c, op ) ) {
    return c[ op ].call( this, v1, v2 ) ? options.fn( this ) : options.inverse( this );
  }
  return options.inverse( this );
} );

Ensuite, pour l'utiliser, nous obtenons quelque chose comme:

{{#compare numberone "eq" numbretwo}}
  do something
{{else}}
  do something else
{{/compare}}

Je suggérerais de déplacer l'objet en dehors de la fonction pour obtenir de meilleures performances, mais vous pouvez également ajouter n'importe quelle fonction de comparaison, y compris "et" et "ou".

4
ars265

Une autre alternative consiste à utiliser le nom de la fonction dans #if. Le #if détectera si le paramètre est fonctionnel et si c'est le cas, il l'appellera et utilisera son retour pour le contrôle de vérité. Ci-dessous, ma fonction obtient le contexte actuel sous la forme this.

{{#if myFunction}}
  I'm Happy!
{{/if}}
3
Shital Shah

Installez le module Ember Truth Helpers en exécutant la commande ci-dessous.

braise installer braqueurs de vérité

vous pouvez commencer à utiliser la plupart des opérateurs logiques (eq, not-eq, not et, ou, gt, gte, lt, lte, xor).

{{#if (or section1 section2)}}  
...content  
{{/if}}

Vous pouvez même inclure des sous-expressions pour aller plus loin,

{{#if (or (eq section1 "section1") (eq section2 "section2") ) }}  
...content  
{{/if}}
3
Ember Freak

Je peux comprendre pourquoi vous voudriez créer une aide pour les situations où vous avez un grand nombre de comparaisons variées à effectuer dans votre modèle, mais pour un nombre relativement petit de comparaisons (ou même une, ce qui m’a amené à cette page la première place), il serait probablement juste plus facile de définir une nouvelle variable de guidon dans votre appel de fonction de rendu de vue, comme:

Passer au guidon du rendu:

var context= {
    'section1' : section1,
    'section2' : section2,
    'section1or2' : (section1)||(section2)
};

et ensuite dans votre modèle de guidon:

{{#if section1or2}}
    .. content
{{/if}}

Je mentionne cela pour des raisons de simplicité, mais aussi parce que c'est une réponse rapide et utile tout en respectant la nature sans logique du guidon.

2
Programmer Dan

si vous voulez juste vérifier si l'un ou l'autre élément est présent, vous pouvez utiliser cet assistant personnalisé

Handlebars.registerHelper('if_or', function(elem1, elem2, options) {
  if (Handlebars.Utils.isEmpty(elem1) && Handlebars.Utils.isEmpty(elem2)) {
    return options.inverse(this);
  } else {
    return options.fn(this);
  }
});

comme ça

{{#if_or elem1 elem2}}
  {{elem1}} or {{elem2}} are present
{{else}}
  not present
{{/if_or}}

si vous devez également pouvoir avoir un "ou" à comparer valeurs de retour de fonction , je préférerais ajouter une autre propriété qui renvoie le résultat souhaité.

Les modèles devraient être sans logique après tout!

1
deepflame

Solution correcte pour ET/OU

Handlebars.registerHelper('and', function () {
    // Get function args and remove last one (function name)
    return Array.prototype.slice.call(arguments, 0, arguments.length - 1).every(Boolean);
});
Handlebars.registerHelper('or', function () {
    // Get function args and remove last one (function name)
    return Array.prototype.slice.call(arguments, 0, arguments.length - 1).some(Boolean);
});

Puis appelez comme suit

{{#if (or (eq questionType 'STARTTIME') (eq questionType 'ENDTIME') (..) ) }}

BTW: Notez que la solution donnée ici est incorrecte, il ne soustrait pas le dernier argument qui est le nom de la fonction. https://stackoverflow.com/a/31632215/1005607

Son AND/OR original était basé sur la liste complète des arguments

   and: function () {
        return Array.prototype.slice.call(arguments).every(Boolean);
    },
    or: function () {
        return Array.prototype.slice.call(arguments).some(Boolean);
    }

Quelqu'un peut-il changer cette réponse? J'ai juste perdu une heure à essayer de réparer quelque chose dans une réponse recommandée par 86 personnes. Le correctif consiste à filtrer le dernier argument qui correspond au nom de la fonction. Array.prototype.slice.call(arguments, 0, arguments.length - 1)

1
gene b.

Ici, nous avons le guidon Vanilla pour plusieurs logiques && et || (et ou):

Handlebars.registerHelper("and",function() {
    var args = Array.prototype.slice.call(arguments);
    var options = args[args.length-1];

    for(var i=0; i<args.length-1; i++){
        if( !args[i] ){
            return options.inverse(this);
        }
    }

    return options.fn(this);
});


Handlebars.registerHelper("or",function() {
    var args = Array.prototype.slice.call(arguments);
    var options = args[args.length-1];

    for(var i=0; i<args.length-1; i++){
        if( args[i] ){
            return options.fn(this);
        }
    }

    return options.inverse(this);
}

// Results
// {{#and foo bar sally bob}} yup {{else}} nope {{/and}} // yup
// {{#or foo bar "" sally bob}} yup {{else}} nope {{/or}} // yup

// {{#and foo bar "" sally bob}} yup {{else}} nope {{/and}} // nope
// {{#or "" "" "" "" ""}} yup {{else}} nope {{/or}} // nope

Vous n'êtes pas sûr s'il est "sûr" d'utiliser "et" et "ou" ... peut-être changer quelque chose comme "op_and" et "op_or"?

1
bob

J'ai trouvé un paquet npm fabriqué avec CoffeeScript qui contient de nombreux utilitaires incroyablement utiles pour le guidon. Jetez un coup d’œil à la documentation dans l’URL suivante:

https://npmjs.org/package/handlebars-helpers

Vous pouvez faire un wget http://registry.npmjs.org/handlebars-helpers/-/handlebars-helpers-0.2.6.tgz pour les télécharger et voir le contenu du paquet.

Vous pourrez faire des choses comme {{#is number 5}} ou {{formatDate date "%m/%d/%Y"}}

1
Cristian Rojas

Pour ceux qui ont des problèmes pour comparer les propriétés des objets, ajoutez cette solution dans l'aide

L'assistant Ember.js ne reconnaît pas correctement un paramètre

1
Manuel Cepeda

Malheureusement, aucune de ces solutions ne résout le problème de l'opérateur "OU" "cond1 || cond2".

  1. Vérifier si la première valeur est vraie

  2. Utilisez "^" (ou) et vérifiez si sinon cond2 est vrai

    {{#if cond1}} FAITES L'ACTION {{^}} {{#if cond2}} FAITES L'ACTION {{/ if}} {{/ if}}

Il enfreint la règle DRY. Alors pourquoi ne pas utiliser partiel pour le rendre moins salissant

{{#if cond1}}
    {{> subTemplate}}
{{^}}
    {{#if cond2}}
        {{> subTemplate}}
    {{/if}}
{{/if}}
1
Pawel

Nous venons d’arriver à cette publication après une recherche sur Google sur la manière 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 système frontal en utilisant la version du navigateur de HandlebarsJS pour l'analyse. 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

An Array containing the entire match result and any parentheses-captured matched results; null if there were no matches.

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 on peut consulter la documentation de HandlebarsJS http://handlebarsjs.com/builtin_helpers.html

You can use the if helper to conditionally render a block. If its argument returns false, undefined, null, "", 0, or [], Handlebars will not render the block.

Alors...

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

UPDATE:

Après avoir testé sur tous les navigateurs , cela ne fonctionne pas sous Firefox . HandlebarsJS transmet d’autres arguments à un appel de fonction, ce qui signifie que lors de l’appel de String.prototype.match, le deuxième argument (c.-à-d. Les indicateurs Regexp pour l’appel de la fonction de correspondance selon la documentation ci-dessus) semble être passé. 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 de lancer 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}}
1
Jon

Encore une autre solution tordue pour un assistant ternaire:

'?:' ( condition, first, second ) {
  return condition ? first : second;
}

<span>{{?: fooExists 'found it' 'nope, sorry'}}</span>

Ou un simple assistant de coalesce:

'??' ( first, second ) {
  return first ? first : second;
}

<span>{{?? foo bar}}</span>

Étant donné que ces caractères n'ont pas de signification particulière dans le balisage du guidon, vous êtes libre de les utiliser pour les noms d'assistance.

0
Moritz Friedrich

Dans Ember.js, vous pouvez utiliser inline if helper in if block helper. Il peut remplacer l'opérateur logique ||, par exemple:

{{#if (if firstCondition firstCondition secondCondition)}}
  (firstCondition || (or) secondCondition) === true
{{/if}}
0
Daniel Kmak

Vous pouvez le faire simplement en utilisant l'opérateur logique comme ci-dessous:

{{#if (or(eq firstValue 'String_to_compare_value') (eq secondValue 'String_to_compare_value'))}}business logic goes here{{/if}}

{{#if (and(eq firstValue 'String_to_compare_value') (eq secondValue 'String_to_compare_value'))}}business logic goes here{{/if}}

Avant de fermer si vous pouvez écrire votre logique métier

0
Kunwar Babu

En suivant ces 2 guides ne façon de laisser les utilisateurs définir des instructions if liées personnalisées et aides personnalisées J'ai pu ajuster mes paramètres partagés vues dans ce post sur stackoverflow pour utiliser ceci à la place de l'instruction standard #if. Cela devrait être plus sûr que de simplement jeter un #if là-dedans.

Les assistants liés dans ce Gist sont exceptionnels.

<li>
    <a href="{{unbound view.varProductSocialBlog}}">
        {{#if-equal view.showDiv "true"}}<div>{{/if-equal}}<i class="fa fa-rss-square"></i>{{#if-equal view.showDiv "true"}}</div>{{/if-equal}}
        {{#if-equal view.showTitle "true"}}Blog{{/if-equal}}
    </a>
</li>

J'utilise le projet ember cli pour construire mon application ember.

Configuration actuelle au moment de ce post:

DEBUG: -------------------------------
DEBUG: Ember      : 1.5.1
DEBUG: Ember Data : 1.0.0-beta.7+canary.b45e23ba
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery     : 2.1.1
DEBUG: -------------------------------
0
Chris Hough