string - example - Handlebarsjs comprueba si una cadena es igual a un valor

handlebars if condition example

Question

¿Es posible en Handlebars verificar si una cadena es igual a otro valor sin registrar un ayudante? Parece que no puedo encontrar nada relevante a esto en la referencia de Manillares.

Por ejemplo:

{{#if sampleString == "This is a string"}}
...do something
{{/if}}

Answer 1

Acabo de llegar a esta publicación de una búsqueda en google sobre cómo verificar si una cadena es igual a otra cadena.

Utilizo HandlebarsJS en el lado del servidor de NodeJS, pero también uso los mismos archivos de plantilla en el front-end utilizando la versión del navegador de HandlebarsJS para analizarlos. Esto significaba que si quería un ayudante personalizado, tendría que definirlo en 2 lugares separados, o asignar una función al objeto en cuestión, ¡demasiado esfuerzo!

Lo que la gente olvida es que ciertos objetos tienen funciones heredadas que se pueden usar en la plantilla de bigote. En el caso de una cadena:

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

Una matriz que contiene el resultado de coincidencia completo y los resultados coincidentes capturados con paréntesis; nulo si no hubiera coincidencias.

Podemos usar este método para devolver una serie de coincidencias, o null si no se encontraron coincidencias. Esto es perfecto, porque mirando la documentación de HandlebarsJS http://handlebarsjs.com/builtin_helpers.html

Puede utilizar el ayudante if para representar condicionalmente un bloque. Si su argumento devuelve falso, indefinido, nulo, "", 0 o [], los manillares no representarán el bloque.

Asi que...

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

ACTUALIZAR:

Después de probar en todos los navegadores, esto no funciona en Firefox . HandlebarsJS pasa otros argumentos a una llamada de función, lo que significa que cuando se llama a String.prototype.match, el segundo argumento (es decir, los indicadores Regexp para la llamada de función de coincidencia según la documentación anterior) parece que se está pasando. Firefox ve esto como un uso obsoleto de String.prototype.match, y por lo tanto se rompe.

Una solución es declarar un nuevo prototipo funcional para el objeto String JS y usarlo en su lugar:

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

Asegúrese de que este código JS esté incluido antes de ejecutar su función Handlebars.compile (), luego en su plantilla ...

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

Answer 2

El servicio de correo Mandrill soporta manillares y aquí es posible usar "backticks" para evaluar una expresión lógica en un bloque #if:

{{#if `operating_system == "OS X"`}}
  <p>Click here for instructions to install on a Mac</p>
{{elseif `operating_system == "Windows"`}}
  <p>Click here for instructions to install on a PC</p>
{{/if}}

No sé si esto es posible en general, pero deberías probarlo. Funciona bien para mí.

Answer 3

En Handlebars, los paréntesis se utilizan para invocar el primer elemento listado como una función, utilizando (opcional) elementos posteriores como parámetros. Por lo tanto, la sintaxis de Ember se puede usar sin Ember, siempre que pueda configurar el contexto usted mismo. Por ejemplo:

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

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

Una vez que lo hagas, puedes usar las operaciones de bloque estándar {{# #}} ​​y {{# # a menos}}:

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

Tenga cuidado al cambiar de contexto con {{with}} o al usar parciales en línea. Puedes perder la pista de tu función "eq" definida. La forma garantizada de trabajar, independientemente de los nuevos contextos:

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

Answer 4

La respuesta anterior con coincidencia no me funciona, recibo un error en la instrucción if (algo así como ''debe tener un solo argumento'').

Sin embargo, acabo de encontrar la solución here sin tener que escribir más ayuda:

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

Answer 5

Los manubrios tienen un operador condicional llamado "igual" que toma dos parámetros:

1. La variable

2.Qué comprobas si la variable contiene.

Por ejemplo, para verificar si ''status'' contiene ''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}}

Answer 6

No puede comparar directamente las cadenas en el manillar y tiene que usar un ayudante. Probé las soluciones anteriores con mi aplicación Koa y no pude registrar al ayudante. El siguiente código funcionó para mí y creo que esto también debería funcionar para aplicaciones Express. Espero que esto ayude a alguien.

Código en 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
    }
}));

Código en el archivo HBS donde fruta es la variable a comparar:

 <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>

Answer 7

Node.js agrega esto en server.js

const isEqual = function(a, b, opts) {
  if (a == b) {
    return opts.fn(this) 
  } else { 
    return opts.inverse(this) 
  } 
}

var hbs = require(''hbs'');
hbs.registerHelper(''if_eq'', isEqual);

Answer 8

Parece que no puedes hacerlo "directamente"

Trate de usar ayudante, ¿por qué no?

Registre su ayudante en su código javascript:

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

Usar en plantilla:

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

Más detalles aquí: Operador lógico en un handlebars.js {{#if}} condicional

UPD: De otra manera:

Supongamos que sus datos son:

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

Luego (usando jQuery):

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

Una plantilla de uso:

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

Answer 9

Simplemente usaría ayudantes como este:

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);
});

Luego en tu código:

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

Answer 10

Tratar:

{{# es item.status "complete"}} ... {{/ es}}

Answer 11

Un caso común para una función auxiliar simple y reutilizable es provocar un retorno de string1 si los valores son iguales y string2 si no lo son.

Ejemplo:

Ayudante (llamémoslo "ifEqual" y enviemos 4 parámetros):

helpers: {

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

Uso de plantillas:

Para este ejemplo, suponga que la plantilla recibe un objeto de "transacción" con una propiedad "transactionType": { transactionType: "expense", description: "Copies" }

Digamos que nuestra plantilla tiene un <select> para el tipo de transacción, con varias <option>s como se muestra. Queremos usar los manillares para preseleccionar la opción que coincida con el valor de transactionType.

Nuestro nuevo {{ ifEqual }} se usa para insertar "seleccionado" para la <option> con el valor correspondiente de "gasto".

<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>

Answer 12

Use el handlebars-helpers , que proporciona eq helper