Como realizo um if / else no mustache.js?

258

Parece bastante estranho que eu não consiga entender como fazer isso no bigode. É suportado?

Esta é minha triste tentativa de tentar:

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

Obviamente, isso não está certo, mas a documentação não menciona nada disso. A palavra "else" nem é mencionada :(

Além disso, por que o bigode é projetado dessa maneira? Esse tipo de coisa é considerado ruim? Ele está tentando me forçar a definir o valor padrão no próprio modelo? E os casos em que isso não é possível?

javascript templates mustache

— egervari
fonte

1

"por que o bigode é projetado dessa maneira?" Não tenho muita certeza, mas acho que a idéia é que uma linguagem de modelagem deva ser exatamente isso: uma linguagem para escrever modelos, ou seja, coisas que se pareçam com a saída que produzem, apenas com furos para onde os bits variáveis vão. Colocar a lógica na linguagem de modelos torna os modelos mais complicados e, quando você já possui uma linguagem de programação para lidar com os bits lógicos, por que se preocupar?

— Paul D. Waite

4

@ PaulD.Waite "Sem lógica" realmente significa "código não arbitrário", eu acho. É tão ruim colocar a lógica de visualização verdadeira no código quanto colocar a lógica de não visualização em um modelo. O bigode tenta fornecer uma lógica mínima para fazer isso.

— precisa saber é o seguinte

2

Ou use guidão em vez de bigode. Ser capaz de escrever, por exemplo, {{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}é mais legível, muito mais limpo e ainda é uma apresentação. "Sem lógica" é uma diretriz, não precisa ser uma camisa de força.

— Skierpage

Talvez não seja um mecanismo de modelagem versátil o suficiente quando um OP diz "esta é minha triste [...] tentativa, obviamente isso não está certo" ... e então a resposta aceita é uma cópia e colar desse código :). Nenhum julgamento sobre OP ou resposta; apenas onmustache

— dwanderson

498

É assim que você faz se / else no Bigode (perfeitamente suportado):

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

Ou no seu caso:

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

Procure seções invertidas nos documentos: https://github.com/janl/mustache.js

— Eneko Alonso
fonte

89

Os documentos do bigode são hilários. "Chamamos isso de" menos lógica "porque não há instruções if, cláusulas else ou loops". Yeeeeaaaaaa ....

— caixa de

6

@boxed, tecnicamente você está certo, a seção invertida é uma declaração lógica, pois verifica o valor da tag. Mas acho que a nuance aqui é que ambas as declarações precisam ser avaliadas explicitamente, em vez de uma única if / else. Basicamente, o bigode força a estrutura if (condition){ //do something}seguida por a if (!condition){//do something else}. Além disso, a quantidade de lógica que se pode executar na lógica é extremamente reduzida em comparação com uma linguagem baseada em lógica. Existência ou inexistência são as únicas verificações, ou seja, você não pode verificar se o valor de uma tag é igual a 5 e depois cai no código dessa tag.

— 181 MandM

22

@ Mandand sim ... por isso tem lógica, mas simplesmente não pode fazer nada de útil: P

— encaixotado em

Isso evita que você se engane com a lógica. Ter um monte de aninhados if / else dentro de outro if / else é um sinal de mal projetado

— Tebe

@boxed você pode fazer por loop com moustache.js (pelo menos ciclo ngFor-ish)

— aloisdg se mudar para codidact.com

54

Isso é algo que você resolve no "controlador", que é o ponto da modelagem sem 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

}

Na verdade, é MUITO melhor do que manter os URLs da imagem ou outras mídias que podem ou não mudar nos seus modelos, mas é necessário algum tempo para se acostumar. O objetivo é desaprender a visão do túnel do modelo; um URL de img de avatar deve ser usado em outros modelos. Você manterá esse URL nos modelos X ou em um único objeto de configurações DEFAULTS? ;)

Outra opção é fazer o seguinte:

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

E no modelo:

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

Mas isso vai contra todo o significado da modelagem sem lógica. Se é isso que você quer fazer, deseja modelagem lógica e não deve usar o Bigode, embora tenha a chance de aprender esse conceito;)

— BGerrissen
fonte

Obrigado. Essa é uma ótima resposta! Na verdade, ele também me ajudou com outros aspectos estruturais sobre "quando fazer coisas" na estrutura do código javascript.

— egervari 17/05

{{/ # hasAvatar}} e {{/ # noAvatar}} devem ser {{/ hasAvatar}} e {{/ noAvatar}} nesta resposta.

— Mulhoon 22/08/12

14

Sua declaração else deve ter esta aparência (observe o ^):

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

No bigode, isso é chamado de "seções invertidas".

— anonimato
fonte

7

Note que você não precisa de tanto # e ^, é apenas ^ para o caso de 'não'

— zappan

Isso não funciona na versão mais recente. O Zappan está correto, você só precisa do ^

— simonmorley

0

Você pode definir um auxiliar na exibição. No entanto, a lógica condicional é um pouco limitada. O Moxy-Stencil ( https://github.com/dcmox/moxyscript-stencil ) parece abordar isso com ajudantes "parametrizados", por exemplo:

e na vista:

view.isActive = função (caminho: string) {caminho de retorno === this.path? "class = 'active'": ''}

— Daniel
fonte

0

Observe que você pode usar {{.}}para renderizar o item de contexto atual.

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

{{^avatar}}missing{{/avatar}}

— Hafthor
fonte