Mustache.js dosyasında if / else dosyasını nasıl başarabilirim?

258

Bunu bıyık içinde nasıl yapacağımı anlayamıyorum oldukça garip görünüyor. Destekleniyor mu?

Bu benim denemedeki üzücü girişimim:

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

Bu kesinlikle doğru değil, ancak belgeler böyle bir şeyden bahsetmiyor. "Başka" kelimesi bile geçmiyor :(

Ayrıca, bıyık neden bu şekilde tasarlandı? Bu tür şeyler kötü mü sayılıyor? Beni modelin kendisinde varsayılan değeri ayarlamaya zorluyor mu? Bunun mümkün olmadığı durumlar ne olacak?

javascript templates mustache

— Egervári
kaynak

1

"Bıyık neden bu şekilde tasarlandı?" Çok emin değilim, ama fikir, bir dilin sadece şu olması gerektiğini düşünüyorum: şablonlar yazmak için bir dil, yani değişken bitlerin gittiği deliklerle, ürettikleri çıktıya benzeyen şeyler. Şablon diline mantık koymak, şablonları daha karmaşık hale getirir ve mantık bitlerini işlemek için zaten bir programlama diliniz olduğunda neden rahatsız edersiniz?

— Paul D.Waite

4

@ PaulD.Waite "Mantıksız" gerçekten "keyfi olmayan kod" anlamına gelir, sanırım. Gerçek görünüm mantığını bir şablonda görüntülenmeyen mantık koymak kadar kötüdür. Bıyık, bunu başarmak için minimum bir mantık sağlamaya çalışır.

— jpmc26

2

Veya bıyık yerine gidon kullanın. Örneğin yazı yazabilmek {{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}daha kolay okunabilir, çok daha temiz ve yine de sunum. "Mantıksız" bir kılavuzdur, deli gömleği olmak zorunda değildir.

— skierpage

Belki de bir OP "bu benim üzücü girişimim [...] bu kesinlikle doğru değil" derken çok yönlü bir şablon motoru değildir ... ve sonra kabul edilen cevap bu kodun bir kopyasını yapıştırır :). OP ya da cevap hakkında karar yok; just onmustache

— dwanderson

499

Bıyıkta / else (mükemmel şekilde desteklenir) durumunda böyle yaparsınız:

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

Veya sizin durumunuzda:

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

Dokümanlardaki ters bölümleri arayın: https://github.com/janl/mustache.js

— Eneko Alonso
kaynak

89

Bıyık dokümanlar komik. "Biz buna" mantıksız "diyoruz çünkü if ifadeleri, başka bir cümle ya da döngüler yok." Yeeeeaaaaaa ....

— kutladı

6

@boxed, teknik olarak haklısınız, tersine çevrilmiş bölüm etiket değerini kontrol ettiği için mantıksal bir ifadedir. Ancak, buradaki nüansın, her iki ifadenin tek bir if / else yerine açık bir şekilde değerlendirilmesi gerektiği olduğunu düşünüyorum. Temel olarak, bıyık yapıyı zorlar ve if (condition){ //do something}bunu a if (!condition){//do something else}. Ayrıca, bir kişinin mantıkta gerçekleştirebileceği mantık miktarı, mantık tabanlı bir dile kıyasla son derece azalmıştır. Varlık veya yokluk tek denetimlerdir, yani bir etiketin değerinin 5'e eşit olup olmadığını kontrol edemez ve ardından etiketin koduna giremezsiniz.

— MandM

22

@MandM evet ... bu yüzden mantığı var ama yararlı bir şey yapamaz: P

— kutulu

Sadece eğer başka bir mantıkla uğraşmaktan kaçınır. Eğer / başka bir iç içe bir sürü iç içe olması / if yanlış tasarım belirtisi ise

— Tebe

@boxed moustache.js ile döngü için yapabilirsiniz (en azından ngFor-ish döngü)

— aloisdg, codidact.com'a taşınıyor

54

Bu mantıksız şablonlama noktası olan "kontrolör" de çözdüğünüz bir şeydir.

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

}

Bu aslında, şablonlarınızda değişebilecek veya değişmeyebilecek, ancak alışmak biraz zaman alan resim URL'lerini veya diğer medyaları korumaktan çok daha iyi. Mesele, şablon tünel vizyonunu öğrenmektir, diğer şablonlarda kullanılacak bir avatar img url'si, bu URL'yi X şablonlarında mı yoksa tek bir VARSAYILAN ayar nesnesinde mi tutacaksınız? ;)

Başka bir seçenek aşağıdakileri yapmaktır:

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

Ve şablonda:

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

Fakat bu mantıksız şablonlamanın tüm anlamına aykırıdır. Yapmak istediğiniz şey buysa, mantıklı bir şablon istiyorsunuz ve Bıyığı kullanmamalısınız, ancak bu kavramı kendinize öğrenme şansı verin;)

— BGerrissen
kaynak

Teşekkürler. Bu harika bir yanıt! Aslında javascript kodu yapısında "ne zaman şeyler yapmak" hakkında diğer yapısal yönleri ile bana yardımcı oldu.

— egervari

Bu yanıtta {{/ # hasAvatar}} ve {{/ # noAvatar}} {{/ hasAvatar}} ve {{/ noAvatar}} olmalıdır.

— Mulhoon

14

Sizin başka deyim (not şu şekilde görünmelidir ^):

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

Bıyıkta buna 'Ters bölümler' denir.

— anonim
kaynak

7

hem # hem de ^'ye ihtiyacınız olmadığını unutmayın, 'değil' davası için sadece ^

— zappan

Bu en son sürümde çalışmaz. Zappan doğru, sadece ^

— simonmorley

0

Görünümde bir yardımcı tanımlayabilirsiniz. Ancak, koşullu mantık biraz sınırlıdır. Moxy-Stencil ( https://github.com/dcmox/moxyscript-stencil ) bunu "parametreli" yardımcılarla ele alıyor gibi görünüyor, örn:

ve görünümde:

view.isActive = işlev (yol: dize) {dönüş yolu === this.path? "class = 'active'": ''}

— Daniel
kaynak

0

{{.}}Geçerli bağlam öğesini oluşturmak için kullanabilirsiniz .

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

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

— Hafthor
kaynak