¿Cómo logro un if/else en mustache.js?
Parece bastante extraño que no sepa 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 es correcto, 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? ¿Se considera malo este tipo de cosas? ¿Está intentando obligarme a establecer el valor predeterminado en el modelo mismo? ¿Qué pasa con los casos en los que eso no es posible?
Así es como se hace if/else 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#inverted-sections
Esto es algo que se resuelve en el "controlador", que es el objetivo 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
}
En realidad, esto es MUCHO mejor que mantener las URL de imágenes u otros medios que pueden cambiar o no en sus plantillas, pero requiere algo de tiempo para acostumbrarse. El punto es desaprender la visión de túnel de la plantilla, una URL de img de avatar seguramente se usará en otras plantillas, ¿mantendrá esa URL en las plantillas X o en un único 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 del significado total de plantillas sin lógica. Si eso es lo que quieres hacer, quieres plantillas lógicas y no deberías usar Moustache, aunque dale una buena oportunidad de aprender este concepto;)
Su declaración else debería verse así (tenga en cuenta ^):
{{^avatar}}
...
{{/avatar}}
En bigote esto se llama 'secciones invertidas'.
Tenga en cuenta que puede utilizar {{.}}para representar el elemento de contexto actual.
{{#avatar}}{{.}}{{/avatar}}
{{^avatar}}missing{{/avatar}}
