Bagaimana cara menyelesaikan if / else di mustache.js?

258

Tampaknya agak aneh bahwa saya tidak tahu bagaimana melakukan ini dalam kumis. Apakah ini didukung?

Ini adalah upaya menyedihkan saya dalam mencoba:

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

Ini jelas tidak benar, tetapi dokumentasi tidak menyebutkan hal seperti ini. Kata "lain" bahkan tidak disebutkan :(

Juga, mengapa kumis dirancang seperti ini? Apakah hal semacam ini dianggap buruk? Apakah ini mencoba memaksa saya untuk menetapkan nilai default dalam model itu sendiri? Bagaimana dengan kasus-kasus di mana itu tidak mungkin?

javascript templates mustache egervari
sumber
1
"Kenapa kumis dirancang seperti ini?" Saya tidak terlalu yakin, tapi saya pikir idenya adalah bahwa bahasa templating harus hanya itu: bahasa untuk menulis template, yaitu hal-hal yang terlihat seperti output yang mereka hasilkan, hanya dengan lubang di mana bit variabel pergi. Menempatkan logika dalam bahasa templat membuat templat lebih rumit, dan ketika Anda sudah memiliki bahasa pemrograman untuk menangani bit logika, mengapa repot-repot?
Paul D. Waite
4
@ PaulD.Waite "Logika-kurang" benar-benar berarti "kode non-arbitrary," saya pikir. Sama buruknya untuk menempatkan logika tampilan benar dalam kode seperti halnya menempatkan logika non-view dalam template. Kumis mencoba memberikan logika minimum untuk mencapai itu.
jpmc26
2
Atau gunakan setang bukan kumis. Mampu menulis, misalnya {{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}lebih mudah dibaca, lebih bersih, dan masih presentasi. "Logika-kurang" adalah pedoman, tidak harus menjadi jaket ketat.
skierpage
Mungkin itu bukan mesin templat serbaguna yang cukup ketika OP mengatakan "ini adalah usaha saya yang menyedihkan [...] ini jelas tidak benar" ... dan kemudian jawaban yang diterima adalah copy-paste kode itu :). Tidak ada penilaian pada OP atau jawaban; just onmustache
dwanderson

Jawaban:

498

Ini adalah bagaimana Anda melakukannya jika / selain di Kumis (didukung sempurna):

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

Atau dalam kasus Anda:

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

Cari bagian terbalik dalam dokumen: https://github.com/janl/mustache.js

Eneko Alonso
sumber
89
Dokumen kumis lucu. "Kami menyebutnya" tanpa logika "karena tidak ada pernyataan if, klausa lain, atau untuk loop." Yeeeeaaaaaa ....
kotak
6
@boxed, secara teknis Anda benar, bagian terbalik adalah pernyataan logis, karena memeriksa nilai tag. Tapi, saya pikir nuansanya di sini adalah bahwa kedua pernyataan harus dievaluasi secara eksplisit, bukan satu jika / lain. Pada dasarnya, kumis memaksa struktur if (condition){ //do something}diikuti oleh a if (!condition){//do something else}. Juga, jumlah logika yang dapat dilakukan seseorang dalam logika sangat berkurang dibandingkan dengan bahasa berbasis logika. Hanya ada atau tidak adanya pemeriksaan, yaitu Anda tidak dapat memeriksa apakah nilai tag sama dengan 5 dan kemudian jatuh ke dalam kode tag itu.
MandM
22
@ MandM ya ... jadi ini memiliki logika tetapi tidak bisa melakukan apa pun yang berguna: P
kotak
Itu hanya membuat Anda jauh dari bermain-main dengan logika if else. Memiliki banyak bersarang jika / lain di dalam yang lain jika / lain adalah tanda misdesign
Tebe
@boxed, Anda dapat melakukannya untuk loop dengan moustache.js (setidaknya loop ngFor-ish)
aloisdg pindah ke codidact.com
54

Ini adalah sesuatu yang Anda pecahkan dalam "controller", yang merupakan titik dari templating tanpa logika.

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

}

Ini sebenarnya BANYAK lebih baik daripada mempertahankan url gambar atau media lain yang mungkin atau mungkin tidak berubah dalam template Anda, tetapi perlu membiasakan diri. Intinya adalah untuk menghapus visi terowongan template, avatar img url terikat untuk digunakan dalam template lain, apakah Anda akan mempertahankan url pada template X atau objek pengaturan DEFAULTS tunggal? ;)

Pilihan lain adalah melakukan hal berikut:

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

Dan di templat:

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

Tapi itu bertentangan dengan seluruh arti dari templating tanpa logika. Jika itu yang ingin Anda lakukan, Anda ingin templating logis dan Anda tidak boleh menggunakan Kumis, meskipun memberi diri Anda kesempatan yang adil untuk mempelajari konsep ini;)

BGerrissen
sumber
Terima kasih. Itu respons yang bagus! Ini sebenarnya membantu saya dengan aspek struktural lainnya juga tentang "kapan melakukan sesuatu" dalam struktur kode javascript.
egervari
{{/ # hasAvatar}} dan {{/ # noAvatar}} harus {{/ hasAvatar}} dan {{/ noAvatar}} dalam jawaban ini.
Mulhoon
14

Pernyataan Anda yang lain akan terlihat seperti ini (perhatikan ^):

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

Dalam kumis ini disebut 'Bagian terbalik'.

orang dgn nama yg tdk dikenal
sumber
7
perhatikan bahwa Anda tidak perlu # dan ^, hanya ^ untuk kasus 'tidak'
zappan
Itu tidak berfungsi di versi terbaru. Zappan benar, Anda hanya perlu ^
simonmorley
0

Anda dapat menentukan pembantu dalam tampilan. Namun, logika kondisional agak terbatas. Moxy-Stencil ( https://github.com/dcmox/moxyscript-stencil ) tampaknya menangani ini dengan bantuan "parameterized", misalnya:

{{isActive param}}

dan dalam tampilan:

view.isActive = fungsi (path: string) {path kembali === this.path? "class = 'active'": ''}

Daniel
sumber
0

Catatan, Anda dapat menggunakan {{.}}untuk merender item konteks saat ini.

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

{{^avatar}}missing{{/avatar}}
Hafthor
sumber