Cómo tener si "cadena === cadena" en la plantilla?

Desarrollador
1

En mi plugin, quiero tener una sentencia if en una plantilla que evalúe si una cadena coincide con un valor.

Algo así:

{{#each groups as |group|}}
  {{#if group.name === "AwesomeName"}}
      <div>¡Hay una coincidencia!</div>
  {{/if}}
{{/each}}

¿Cómo puedo hacer esto en Discourse?

Entiendo que usar {{if}} directamente no funciona en Ember/Handlebars. Parece que debo registrar un helper. Algo así:

plugin/assets/javascripts/discourse/helpers/eq/js/es6

import { registerHelper } from 'discourse-common/lib/helpers';

registerHelper('eq', function(arg1, arg2) {
     if (arg1 === arg2) {
         return true
    } else {
       return false
    }
})

plugin/assets/javascripts/templates/components/my-component.hbs

{{#each groups as |group|}}
  {{#eq group.name "AwesomeName"}}
      <div>¡Hay una coincidencia!</div>
 {{/eq}}
{{/each}}

Esto no funciona. (No se muestran errores.)

Probé la solución aquí, que intenta usar “makeBoundHelper”, pero tampoco funciona para mí; en ese caso obtengo errores indicando que “makeBoundHelper” no es una función.

Solo quiero poder hacer una sentencia if para comparar una cadena con un valor. ¿Cómo lo hago?

1 me gusta
2

Quieres usar Computed Properties - The Object Model - Ember Guides

Sin embargo, consulta el código fuente de Discourse para conocer su estilo de codificación específico.

2 Me gusta
3

Las propiedades computadas son interesantes, pero no veo la conexión con lo que me estoy enfocando aquí.

En mi ejemplo, la propiedad clave es group.name y quiero evaluar en la plantilla si esa propiedad coincide con “AwesomeName”. No estoy seguro de cómo las propiedades computadas podrían evitar la necesidad de usar un tipo específico de sentencia {{if}} en la plantilla que no he podido resolver.

4

Las plantillas de Handlebars solo tienen lógica booleana rudimentaria. Puedes realizar comprobaciones de valores truthy.

Para realizar operaciones más complejas, debes ejecutar la lógica en el archivo JS de Ember asociado a la plantilla.

Por ejemplo, si tienes una plantilla en templates/components/my-component.hbs, deberás utilizar el archivo JS components/my-component.js para realizar el cálculo.

En ese archivo, harías algo como esto:

import discourseComputed from "discourse-common/utils/decorators";
import Component from "@ember/component";

export default Component.extend({
  @discourseComputed("string1", "string2")
  property(string1, string2) {
    return string1 === string2;
  }
});

property es simplemente el nombre de una función, pero podría ser cualquier nombre.

Luego, en la plantilla, harías algo como esto:

{{#if property}}
 blah blah...
{{/if}}

Esto obtiene la propiedad calculada desde el archivo JS y muestra el contenido en el bloque #if solo si property devuelve true.

4 Me gusta
5

Gracias por esto, ayuda a aclarar mucho.

Aún no he logrado que funcione del todo, en parte porque no encuentro ejemplos por ahí de cómo usar propiedades calculadas para este tipo de operación.

En mi caso, dentro de mi plugin, estoy realizando el cambio en la plantilla del índice de grupos. Es decir, en el archivo: plugin/assets/javascripts/discourse/groups/index.hbs (simplemente coloqué todo el código del índice de grupos allí y agregué los cambios encima).

¿Te refieres a que el archivo JS de la propiedad calculada debería ir en un archivo que yo cree llamado: plugin/assets/javascripts/discourse/groups/index.js? ¿O puedo simplemente poner ese código en un inicializador?

Este es mi mejor intento para implementar lo que mencionas, ¿es esto lo que tenías en mente:

js:

export default Component.extend({
  @discourseComputed("group.name", "Amazing_Name")
  property(group.name, Amazing_Name) {
    return group.name === Amazing_Name
  }
})

hbs:

 {{#if property}}
    <div>¡Sí, hay una coincidencia!</div>
 {{/if}}

¿O querías decir que debería ingresar literalmente valores generales como “string1” y “string2” en @discourseComputed y luego cambiar la plantilla a {{#if property group.name "Amazing_Name"}}? (Solo de esa manera podría tener en cuenta que cada valor es dinámico en la plantilla.)

Aún no he logrado que funcione del todo con ninguno de los dos enfoques.

Gracias por tu ayuda.

2 Me gusta
6

¿Has logrado que funcione? Necesito un ejemplo detallado de cómo hacerlo (qué contenido añadir, en qué archivo y en qué parte de ese archivo, si es relevante).

1 me gusta
7

En realidad, nunca logré que esto funcionara por mí mismo y tuve que seguir adelante. Parecía absurdo dedicar tanto tiempo a lo que normalmente sería un ejercicio de codificación básico. En mi caso, creo que probablemente fue un poco de sintaxis incorrecta aquí y otra allá, pero nunca encontré ejemplos completos que funcionaran. También estaría agradecido por un ejemplo completo y funcional de cómo hacer un if string === string.

2 Me gusta