¿Cómo logro un if / else en mustache.js?

258

Parece bastante extraño que no pueda entender cómo hacer esto con bigote. ¿Es compatible?

Este es mi triste intento de intentarlo:

    {{#author}}
      {{#avatar}}
        <img src="{{avatar}}"/>
      {{/avatar}}
      {{#!avatar}}
        <img src="/images/default_avatar.png" height="75" width="75" />
      {{/avatar}}
    {{/author}}

Obviamente, esto no está bien, pero la documentación no menciona nada como esto. La palabra "más" ni siquiera se menciona :(

Además, ¿por qué el bigote está diseñado de esta manera? ¿Este tipo de cosas se consideran malas? ¿Intenta obligarme a establecer el valor predeterminado en el modelo en sí? ¿Qué pasa con los casos en que eso no es posible?

javascript templates mustache egervari
fuente
1
"¿Por qué el bigote está diseñado de esta manera?" No estoy muy seguro, pero creo que la idea es que un lenguaje de plantillas debería ser solo eso: un lenguaje para escribir plantillas, es decir, cosas que se parecen a la salida que producen, solo con agujeros donde van los bits variables. Poner la lógica en el lenguaje de plantilla hace que las plantillas sean más complicadas, y cuando ya tienes un lenguaje de programación para manejar los bits lógicos, ¿por qué molestarse?
Paul D. Waite
44
@ PaulD.Waite "Sin lógica" realmente significa "código no arbitrario", creo. Es tan malo poner una lógica de vista verdadera en el código como poner una lógica sin vista en una plantilla. Moustache intenta proporcionar una lógica mínima para lograrlo.
jpmc26
2
O use el manillar en lugar del bigote. Ser capaz de escribir, por ejemplo, {{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}es más legible, mucho más limpio y aún es presentación. "Sin lógica" es una guía, no tiene que ser una camisa de fuerza.
skierpage
Tal vez no sea un motor de plantillas lo suficientemente versátil cuando un OP dice "este es mi triste intento [...] obviamente esto no está bien" ... y la respuesta aceptada es copiar y pegar ese código :). Sin juicio sobre OP o respuesta; justo enmustache
dwanderson

Respuestas:

498

Así es como lo haces si / si no en Moustache (perfectamente compatible):

{{#repo}}
  <b>{{name}}</b>
{{/repo}}
{{^repo}}
  No repos :(
{{/repo}}

O en tu caso:

{{#author}}
  {{#avatar}}
    <img src="{{avatar}}"/>
  {{/avatar}}
  {{^avatar}}
    <img src="/images/default_avatar.png" height="75" width="75" />
  {{/avatar}}
{{/author}}

Busque secciones invertidas en los documentos: https://github.com/janl/mustache.js

Eneko Alonso
fuente
89
Los documentos de bigote son divertidos. "Lo llamamos" sin lógica "porque no hay sentencias if, otras cláusulas o bucles". Yeeeeaaaaaa ....
caja
66
@boxed, técnicamente tienes razón, la sección invertida es una declaración lógica, ya que verifica el valor de la etiqueta. Pero, creo que el matiz aquí es que ambas declaraciones tienen que ser evaluadas explícitamente, en lugar de una sola si / si no. Básicamente, el bigote fuerza la estructura if (condition){ //do something}seguida de a if (!condition){//do something else}. Además, la cantidad de lógica que uno puede realizar en lógica es extremadamente reducida en comparación con un lenguaje basado en lógica. La existencia o la no existencia son las únicas comprobaciones, es decir, no puede comprobar si el valor de una etiqueta es igual a 5 y luego caer en el código de esa etiqueta.
MandM
22
@MandM sí ... así que tiene lógica pero simplemente no puede hacer nada útil: P
caja el
Simplemente evita que juegues con la lógica if if. Tener muchos anidados if / else dentro de otro if / else es un signo de mal diseño
Tebe
@boxed que puedes hacer para bucle con moustache.js (al menos ngFor-ish loop)
aloisdg moviéndose a codidact.com
54

Esto es algo que resuelve en el "controlador", que es el punto de la plantilla sin lógica.

// some function that retreived data through ajax
function( view ){

   if ( !view.avatar ) {
      // DEFAULTS can be a global settings object you define elsewhere
      // so that you don't have to maintain these values all over the place
      // in your code.
      view.avatar = DEFAULTS.AVATAR;
   }

   // do template stuff here

}

En realidad, esto es MUCHO mejor que mantener la URL de la imagen u otros medios que pueden o no cambiar en sus plantillas, pero lleva un tiempo acostumbrarse. El punto es desaprender la visión del túnel de la plantilla, una url de img de avatar se usará en otras plantillas, ¿vas a mantener esa url en las plantillas X o en un solo objeto de configuración DEFAULTS? ;)

Otra opción es hacer lo siguiente:

// augment view
view.hasAvatar = !!view.avatar;
view.noAvatar = !view.avatar;

Y en la plantilla:

{{#hasAvatar}}
    SHOW AVATAR
{{/hasAvatar}}
{{#noAvatar}}
    SHOW DEFAULT
{{/noAvatar}}

Pero eso va en contra de todo el significado de la plantilla sin lógica. Si eso es lo que quiere hacer, quiere plantillas lógicas y no debe usar Moustache, aunque sí tenga la oportunidad de aprender este concepto;)

BGerrissen
fuente
Gracias. Esa es una gran respuesta! De hecho, también me ayudó con otros aspectos estructurales sobre "cuándo hacer cosas" en la estructura del código JavaScript.
egervari
{{/ hasAvatar}} y {{/ # noAvatar}} deben ser {{/ hasAvatar}} y {{/ noAvatar}} en esta respuesta.
Mulhoon
14

Su declaración else debería verse así (tenga en cuenta lo siguiente ^):

{{^avatar}}
 ...
{{/avatar}}

En bigote esto se llama 'secciones invertidas'.

seudónimo
fuente
77
tenga en cuenta que no necesita tanto # como ^, es solo ^ para el caso 'no'
zappan
Eso no funciona en la última versión. Zappan es correcto, solo necesitas el ^
simonmorley
0

Puede definir un ayudante en la vista. Sin embargo, la lógica condicional es algo limitada. Moxy-Stencil ( https://github.com/dcmox/moxyscript-stencil ) parece abordar esto con ayudantes "parametrizados", por ejemplo:

{{isActive param}}

y en la vista:

view.isActive = function (ruta: cadena) {ruta de retorno === this.path? "class = 'active'": ''}

Daniel
fuente
0

Tenga en cuenta que puede usar {{.}}para representar el elemento de contexto actual.

{{#avatar}}{{.}}{{/avatar}}

{{^avatar}}missing{{/avatar}}
Hafthor
fuente