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

209

Parece bastante extraño que no sepa cómo hacerlo en el bigote. ¿Es compatible?¿Cómo logro un if/else en mustache.js?

Ésta es mi triste intento de tratar:

{{#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 "else" ni siquiera se menciona :(

Además, ¿por qué está diseñado el bigote de esta manera? ¿Este tipo de cosas se considera malo? ¿Está tratando de obligarme a establecer el valor predeterminado en el modelo en sí? sobre los casos en los que no es posible?

Fuente

2011-05-17 egervari

"¿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 exactamente eso: un lenguaje para escribir plantillas, es decir, cosas que se parecen al resultado 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, ¿para qué molestarse? –

@ PaulD.Waite "Sin lógica" realmente significa "código no arbitrario", creo. Es tan malo poner la lógica de vista verdadera en el código como lo es poner la lógica que no es vista en una plantilla. Bigote intenta proporcionar una lógica mínima básica para lograr eso. – jpmc26

@ jpmc26: muy cierto. –

407

Así es como se hace si/else en bigote (perfectamente compatible):

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

o en su caso:

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

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

Fuente

2011-06-25 16:25:35

+53

Los documentos de bigote son divertidísimos. "Lo llamamos" sin lógica "porque no hay sentencias if, cláusulas else o bucles". Yeeeeaaaaaa .... – boxed

@boxed, técnicamente tiene razón, la sección invertida es una afirmación lógica, ya que comprueba el valor de la etiqueta. Pero, creo que el matiz aquí es que ambas declaraciones tienen que ser explícitamente evaluadas, en lugar de un solo if/else. Básicamente, bigote fuerza a la estructura 'if (condition) {// do something}' seguida de '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 inexistencia son los únicos controles, es decir, no se puede verificar si el valor de una etiqueta es igual a 5 y luego cae en el código de esa etiqueta. – MandM

+12

@MandM sí ... así que tiene lógica pero simplemente no puede hacer nada útil: P – boxed

Esto es algo a resolver en el "controlador", que es el punto de plantillas logicless.

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

}

Esto es en realidad mucho mejor que el mantenimiento de la imagen url de u otro medio que podría o no cambiar en sus plantillas, pero que lleva un tiempo acostumbrarse. El punto es desaprender la visión de túnel de la plantilla, un avatar img url está destinado a ser utilizado en otras plantillas, ¿va a mantener esa url en plantillas X o 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 plantillas logicless. Si eso es lo que quiere hacer, usted quiere plantillas lógico y no se debe utilizar bigote, aunque no dará por sí mismo una buena oportunidad de aprender este concepto;)

Fuente

2011-05-17 08:03:20 BGerrissen

Gracias. ¡Esa es una gran respuesta! En realidad, me ayudó con otros aspectos estructurales también sobre "cuándo hacer cosas" en la estructura del código de JavaScript. – egervari

{{/ # hasAvatar}} y {{/ # noAvatar}} deberían ser {{/ hasAvatar}} y {{/ noAvatar}} en esta respuesta. – Mulhoon

Su declaración demás debería tener este aspecto (nótese el ^):

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

En bigote esto se llama "protuberancias invertidas.

Fuente

2011-06-21 14:51:54 anonym

tenga en cuenta que no necesita ambos # y ^, es sólo^para 'no' caso – zappan

Eso no funciona en la última versión. Zappan es correcto, solo necesitas el^ – simonmorley

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

Respuesta

Cuestiones relacionadas