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

mustache npm

Question

Parece bastante extraño que no pueda entender cómo hacer esto con el 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}}

Esto obviamente no está bien, pero la documentación no menciona nada como esto. La palabra "else" ni siquiera se menciona :(

Además, ¿por qué el bigote está diseñado de esta manera? ¿Es este tipo de cosas consideradas malas? ¿Está tratando de obligarme a establecer el valor predeterminado en el propio modelo? ¿Qué pasa con los casos donde eso no es posible?

Answer 1

Así es como haces si / else en Bigote (perfectamente soportado):

{{#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 las secciones invertidas en los documentos: https://github.com/janl/mustache.js

Answer 2

Esto es algo que se resuelve en el "controlador", que es el punto de las plantillas 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
}

Esto es, en realidad, MUCHO mejor que mantener las URL de imagen u otros medios que pueden o no cambiar en sus plantillas, pero requiere un tiempo para acostumbrarse. El punto es desaprender la visión de túnel de la plantilla, un avatar img url está destinado a ser usado en otras plantillas, ¿mantendrá esa url en las 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 las plantillas sin lógica. Si eso es lo que quieres hacer, quieres crear plantillas lógicas y no debes usar Moustache, aunque dale una buena oportunidad de aprender este concepto;)

Answer 3

Su otra declaración debería tener este aspecto (observe el ^ ):

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

En bigote esto se llama ''Secciones invertidas''.