Vérification d'une valeur égale à dans l'aide du bloc Ember Handlebar If

Question

Comment vérifier l'égalité des valeurs dans ember.js de l'aide If-block ?

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

Comment réaliser les performances ci-dessus dans le guidon ?

Answer 1

En {{#if}} ne peut tester que les propriétés, et non les expressions arbitraires. La meilleure chose à faire dans des cas comme celui-ci est donc d'écrire une propriété calculant la conditionnelle que vous voulez tester.

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

Ensuite, faites {{#if personIsJohn}} .

Note : Si vous trouvez cette méthode trop contraignante, vous pouvez également enregistrez votre propre plus puissant if aide .

Answer 2

Utilisez un Ember.Component Ainsi, vous éviterez de définir de manière répétitive des propriétés calculées dans vos classes (comme par exemple 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 une balise App.ElseEqualComponent :

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

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

Utilisation :

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

Answer 3

Si vous utilisez les barres HTML (version 1.10+ d'Ember), vous pouvez alors utiliser la fonction Aide à la vérité d'Ember addon :

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

Une fois installé, ce sera aussi simple que ça :

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

Answer 4

Bien que ce problème puisse être résolu en utilisant l'aide eq en écrivant

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

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

comparer.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);

Vous pouvez maintenant l'utiliser facilement à des fins multiples.

pour le contrôle de l'égalité.

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

pour une meilleure vérification.

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

et ainsi de suite.

Answer 5

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 plus lisible.

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

devient

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

Docs relatifs .