web-dev-qa-db-fra.com

Rechercher une valeur égale à in Ember Handlebar If block helper

Comment vérifie-t-on une égalité de valeurs dans ember.js l'aide de bloc If?

{{#if person=="John"}}

Comment pouvons-nous effectuer ci-dessus dans le guidon?

if-statementember.jshandlebars.js
49
user1338121

Le {{#if}} helper peut uniquement tester les propriétés, pas les expressions arbitraires. La meilleure chose à faire dans des cas comme celui-ci est donc d'écrire une propriété calculant le conditionnel que vous souhaitez tester.

personIsJohn: function() {
  return this.get('person') === 'John';
}.property('person')

Alors fais {{#if personIsJohn}}.

Remarque: Si vous trouvez cela trop limitant, vous pouvez également enregistrer votre propre assistant if plus puissant .

77
Jo Liss

Utilisez un Ember.Component , évitez ainsi de définir de manière répétitive des propriétés calculées dans vos classes (comme personIsJohn ci-dessus):

// if_equal_component.js script
App.IfEqualComponent = Ember.Component.extend({
  isEqual: function() {
    return this.get('param1') === this.get('param2');
  }.property('param1', 'param2')
});

// if-equal.handlebars template
{{#if isEqual}}
  {{yield}}
{{/if}}

Vous pouvez définir l'autre partie de la comparaison, avec un App.ElseEqualComponent:

// else_equal_component.js script
App.ElseEqualComponent = App.IfEqualComponent.extend();

// else-equal.handlebars template
{{#unless isEqual}}
  {{yield}}
{{/unless}}

Usage:

{{#if-equal param1=person param2="John"}}
  Hi John!
{{/if-equal}}
{{#else-equal param1=person param2="John"}}
  Who are you?
{{/else-equal}}
26
Panagiotis Panagi

Si vous utilisez HTMLBars (Ember version 1.10+), vous pouvez utiliser l'addon Ember Truth Helper :

https://github.com/jmurphyau/ember-truth-helpers

Une fois installé, ce sera aussi simple que cela:

{{#if (eq person "John")}} hello {{/if}}
19
Johnny Oshika

bien que ce problème puisse être résolu en utilisant eq helper en écrivant

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

mais pour une solution générale, vous pouvez créer votre propre assistant qui prendra trois paramètres param[0] et param[2] étant l'opérande et param[1] étant opérateur. Ci-dessous le fichier d'aide.

compare.js

import Ember from 'ember';

export function compare(params) {
  if(params[3]){  //handle case insensitive conditions if 4 param is passed.
    params[0]= params[0].toLowerCase();
    params[2]= params[2].toLowerCase();
  }
  let v1 = params[0];
  let operator = params[1];
  let v2 = params[2];
  switch (operator) {
    case '==':
      return (v1 == v2);
    case '!=':
      return (v1 != v2);
    case '===':
      return (v1 === v2);
    case '<':
      return (v1 < v2);
    case '<=':
      return (v1 <= v2);
    case '>':
      return (v1 > v2);
    case '>=':
      return (v1 >= v2);
    case '&&':
      return !!(v1 && v2);
    case '||':
      return !!(v1 || v2);
    default:
      return false;
  }
}

export default Ember.Helper.helper(compare);

maintenant, vous pouvez facilement l'utiliser à des fins multiples.

pour le contrôle d'égalité.

{{#if (compare person '===' 'John')}} {{/if}}

pour un meilleur contrôle.

{{#if (compare money '>' 300)}} {{/if}}

etc.

7
Nitin9791

En développant la réponse de Jo Liss, vous pouvez maintenant le faire en utilisant une macro de propriété calculée pour un code plus concis et lisible.

personIsJohn: function() {
  return this.get('person') === 'John';
}.property('person')

devient

personIsJohn: Ember.computed.equal('person', 'John')

Documents Relavent .

4
Will Meldon