Saltar al contenido

Operador lógico en handlebars.js {{#if}} condicional

El tutorial o código que verás en este artículo es la resolución más sencilla y efectiva que encontramos a tus dudas o dilema.

Solución:

Esto es posible ‘haciendo trampa’ con un asistente de bloque. Esto probablemente va en contra de la ideología de las personas que desarrollaron los manubrios.

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

Luego puede llamar al ayudante en la plantilla de esta manera

#ifCond v1 v2
    v1 is equal to v2
else
    v1 is not equal to v2
/ifCond

Llevando la solución un paso más allá. Esto agrega el operador de comparación.

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

    switch (operator) 
);

Úselo en una plantilla como esta:

#ifCond var1 '==' var2

Versión de guión de café

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

Handlebars admite operaciones anidadas. Esto proporciona mucha flexibilidad (y código más limpio) si escribimos nuestra lógica un poco diferente.

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

De hecho, podemos añadir todo tipo de lógica:

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

Simplemente registre estos ayudantes:

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

Si te ha resultado de ayuda este post, nos gustaría que lo compartas con otros desarrolladores y nos ayudes a difundir nuestro contenido.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *