¿Hay alguna manera en el manillar JS para incorporar operadores lógicos en el operador condicional estándar handlebars.js? Algo como esto:
{{#if section1 || section2}}
.. content
{{/if}}
Sé que podría escribir mi propio ayudante, pero primero me gustaría asegurarme de no reinventar la rueda.
javascript
handlebars.js
Mike Robinson
fuente
fuente
registerBoundHelper
no puede manejar la sintaxis de Handlebars. La solución alternativa es crear una vista personalizada: stackoverflow.com/questions/18005111/…Llevando la solución un paso más allá. Esto agrega el operador de comparación.
Úselo en una plantilla como esta:
Versión de Script de café
fuente
'||'
y'&&'
. Agregué estos casos y son muy útiles.v1 = Ember.Handlebars.get(this, v1, options)
v2 = Ember.Handlebars.get(this, v2, options)
Los manillares admiten operaciones anidadas. Esto proporciona mucha flexibilidad (y un código más limpio) si escribimos nuestra lógica un poco diferente.
De hecho, podemos agregar todo tipo de lógica:
Simplemente registre estos ayudantes:
fuente
options
ejecución es mejor mantener conif
método y más fácil de probar. ¡Gracias!and
yor
ayudantes solo trabajan con 2 parámetros, que no es lo que quieres. Me las arreglé para reelaborar tanto eland
y losor
ayudantes para admitir más de dos parámetros. Utilice esta de una sola línea paraand
:return Array.prototype.slice.call(arguments, 0, arguments.length - 1).every(Boolean);
Utilizando este de una sola línea paraor
:return Array.prototype.slice.call(arguments, 0, arguments.length - 1).some(Boolean);
.llevando esto a un nivel superior, para aquellos de ustedes que viven al límite.
gist : https://gist.github.com/akhoury/9118682 Demostración : fragmento de código a continuación
Ayudante de manillar:
{{#xif EXPRESSION}} {{else}} {{/xif}}
un ayudante para ejecutar una instrucción IF con cualquier expresión
encodeURIComponent(property)
template( {name: 'Sam', age: '20' } )
, el avisoage
es astring
, solo para que pueda hacer una demostraciónparseInt()
más adelante en esta publicaciónUso:
Salida
JavaScript: (depende de otro ayudante, sigue leyendo)
Ayudante de manillar:
{{x EXPRESSION}}
Un ayudante para ejecutar expresiones javascript
parseInt(property)
template( {name: 'Sam', age: '20' } )
,age
es unstring
propósito de demostración, puede ser cualquier cosa ...Uso:
Salida:
JavaScript:
Esto parece un poco grande porque amplié la sintaxis y comenté sobre casi cada línea para mayor claridad
Lamento
si desea acceder al alcance de nivel superior, este es ligeramente diferente, la expresión es la UNIÓN de todos los argumentos, uso: digamos que los datos de contexto se ven así:
Javascript:
fuente
{{#each}} ... {{xif ' ../name === this.name' }} {{/each}}
... pero todavía estoy investigando ..{{z ...}}
ayudanteeval(expression);
con esto:eval('(function(){try{return ' + expression + ';}catch(e){}})();');
- Sé que esto se está poniendo feo, pero no puedo pensar en una forma segura de hacer esto - tenga en cuenta que esto no es muy "rápido" para ejecutar, no haría esto en Gran iteración.Hay una manera simple de hacerlo sin escribir una función auxiliar ... Se puede hacer dentro de la plantilla por completo.
Editar: por el contrario, puede hacer o haciendo esto:
Editar / Nota: Desde el sitio web del manillar: handlebarsjs.com aquí están los valores falsos:
fuente
Un problema con todas las respuestas publicadas aquí es que no funcionan con propiedades enlazadas, es decir, la condición if no se vuelve a evaluar cuando cambian las propiedades involucradas. Aquí hay una versión un poco más avanzada de los enlaces de ayuda. Utiliza la función de enlace de la fuente Ember, que también se usa para implementar el
#if
ayudante Ember normal .Esta se limita a una propiedad de enlace único en el lado izquierdo, en comparación con una constante en el lado derecho, que creo que es lo suficientemente bueno para la mayoría de los propósitos prácticos. Si necesita algo más avanzado que una simple comparación, entonces quizás sería bueno comenzar a declarar algunas propiedades calculadas y usar el
#if
ayudante normal en su lugar.Puedes usarlo así:
fuente
Solución mejorada que básicamente funciona con cualquier operador binario (al menos los números, las cadenas no funcionan bien con eval, TENGA CUIDADO DE LA POSIBLE INYECCIÓN DE ESCRITURA SI UTILIZA UN OPERADOR NO DEFINIDO CON ENTRADAS DE USUARIO):
fuente
Aquí hay una solución si desea verificar múltiples condiciones:
Uso:
fuente
Aquí hay un enlace al ayudante de bloque que uso: ayudante de bloque de comparación . Es compatible con todos los operadores estándar y le permite escribir código como se muestra a continuación. Es realmente bastante útil.
fuente
Similar a la respuesta de Jim, pero usando un poco de creatividad también podríamos hacer algo como esto:
Luego, para usarlo, obtenemos algo como:
Sugeriría mover el objeto fuera de la función para un mejor rendimiento, pero de lo contrario puede agregar cualquier función de comparación que desee, incluyendo "y" y "o".
fuente
Otra alternativa es usar el nombre de la función en
#if
. El#if
detectará si el parámetro es función y si es entonces lo llamaremos y utilizar su cambio de cheque truthyness. Debajo de myFunction obtiene el contexto actual comothis
.fuente
Lamentablemente, ninguna de estas soluciones resuelve el problema del operador "OR" "cond1 || cond2".
Use "^" (o) y verifique si cond2 es verdadero
{{#if cond1}} HAGA LA ACCIÓN {{^}} {{#if cond2}} HAGA LA ACCIÓN {{/ if}} {{/ if}}
Se rompe la regla SECO. Entonces, ¿por qué no usar parcial para hacerlo menos desordenado?
fuente
Puedo entender por qué querrías crear un asistente para situaciones en las que tienes que realizar una gran cantidad de comparaciones variadas dentro de tu plantilla, pero para una cantidad relativamente pequeña de comparaciones (o incluso una, que fue lo que me trajo a esta página en el primer lugar), probablemente sería más fácil definir una nueva variable de manillar en su llamada a la función de representación de vista, como:
Pase al manillar en el render:
y luego dentro de su plantilla de manillar:
Menciono esto por simplicidad, y también porque es una respuesta que puede ser rápida y útil mientras sigue cumpliendo con la naturaleza sin lógica de los Manillares.
fuente
Instale el complemento Ember Truth Helpers ejecutando el siguiente comando
puede comenzar a usar la mayoría de los operadores lógicos (eq, not-eq, not, and, or, gt, gte, lt, lte, xor).
Incluso puedes incluir subexpresión para ir más allá,
fuente
Otra solución torcida para un ayudante ternario:
O un simple ayudante de fusión:
Dado que estos caracteres no tienen un significado especial en el marcado del manillar, puede usarlos para nombres de ayuda.
fuente
He encontrado un paquete npm hecho con CoffeeScript que tiene muchos ayudantes útiles increíbles para manillares. Eche un vistazo a la documentación en la siguiente URL:
https://npmjs.org/package/handlebars-helpers
Puede hacer una
wget http://registry.npmjs.org/handlebars-helpers/-/handlebars-helpers-0.2.6.tgz
para descargarlos y ver el contenido del paquete.Podrás hacer cosas como
{{#is number 5}}
o{{formatDate date "%m/%d/%Y"}}
fuente
si solo desea verificar si uno u otro elemento está presente, puede usar este asistente personalizado
Me gusta esto
si también necesita poder tener un "o" para comparar los valores de retorno de la función , preferiría agregar otra propiedad que devuelva el resultado deseado.
¡Las plantillas deberían ser lógicas después de todo!
fuente
Para aquellos que tienen problemas para comparar las propiedades de los objetos, agregue esta solución dentro del ayudante.
Ember.js helper no reconoce correctamente un parámetro
fuente
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.
Uso HandlebarsJS en NodeJS del lado del servidor, pero también uso los mismos archivos de plantilla en el front-end usando la versión del navegador de HandlebarsJS para analizarlo. 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
An Array containing the entire match result and any parentheses-captured matched results; null if there were no matches.
Podemos usar este método para devolver una matriz de coincidencias o
null
si no se encontraron coincidencias. Esto es perfecto, porque mirando la documentación de HandlebarsJS http://handlebarsjs.com/builtin_helpers.htmlYou 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.
Entonces...
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, parece que se pasa el segundo argumento (es decir, los indicadores Regexp para la llamada a la función de coincidencia según la documentación anterior). Firefox ve esto como un uso obsoleto de String.prototype.match, por lo que se rompe.
Una solución alternativa es declarar un nuevo prototipo funcional para el objeto String JS y utilizarlo en su lugar:
Asegúrese de que este código JS esté incluido antes de ejecutar su función Handlebars.compile (), luego en su plantilla ...
fuente
Aquí tenemos manillares de vainilla para múltiples lógicos && y || (y o):
¿No está tan seguro si es "seguro" usar "y" y "o" ... tal vez cambiar a algo como "op_and" y "op_or"?
fuente
Solución correcta para AND / OR
Luego llame de la siguiente manera
Por cierto: tenga en cuenta que la solución dada aquí es incorrecta, no está restando el último argumento que es el nombre de la función. https://stackoverflow.com/a/31632215/1005607
Su AND / OR original se basó en la lista completa de argumentos
¿Alguien puede cambiar esa respuesta? Acabo de perder una hora tratando de arreglar algo en una respuesta recomendada por 86 personas. La solución es filtrar el último argumento, que es el nombre de la función.
Array.prototype.slice.call(arguments, 0, arguments.length - 1)
fuente
Siguiendo estas 2 guías para dejar que los usuarios definan declaraciones personalizadas con límites de ayuda y ayudantes con límites personalizados, pude ajustar mis vistas compartidas en esta publicación en stackoverflow para usar esto en lugar del estándar # si declaración. Esto debería ser más seguro que simplemente lanzar un #if allí.
Los ayudantes personalizados en esa esencia son excepcionales.
Estoy usando el ember cli proyecto para construir mi aplicación ember.
Configuración actual en el momento de esta publicación:
fuente
En Ember.js puedes usar inline if helper en if block helper. Puede reemplazar el
||
operador lógico, por ejemplo:fuente
Puede hacerlo simplemente usando el operador lógico como se muestra a continuación:
Antes de cerrar si puedes escribir tu lógica de negocios
fuente
Puedes usar el siguiente código:
fuente
Aquí hay un enfoque que estoy usando para ember 1.10 y ember-cli 2.0.
Luego puede usarlo en sus plantillas de esta manera:
Cuando se pasan los argumentos de la expresión en como
p0
,p1
,p2
etc., yp0
también se puede hacer referencia comothis
.fuente