Handlebars.js Else If

241

Saya menggunakan Handlebars.js untuk rendering tampilan sisi klien. If Else berfungsi dengan baik tetapi saya telah menemukan persyaratan 3 cara yang membutuhkan ELSE IF:

Ini tidak berfungsi:

{{#if FriendStatus.IsFriend }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

Bagaimana saya melakukan ELSE IF dengan setang?

handlebars.js reach4thelasers
sumber
Mengawasi pembaruan setang, tampaknya itu akan segera diimplementasikan: github.com/wycats/handlebars.js/pull/892
Jacob van Lingen

Jawaban:

376

Setang mendukung {{else if}}blok pada 3.0.0.

Setang v3.0.0 atau lebih tinggi:

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else if FriendStatus.FriendRequested}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{else}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

Namun, sebelum Handlebars v3.0.0, Anda harus menentukan pembantu yang menangani logika percabangan atau ifpernyataan sarang secara manual:

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
  {{#if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
  {{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
  {{/if}}
{{/if}}
Carl
sumber
6
intinya adalah tidak memiliki elsif (atau jika tidak) di setang yang Anda masukkan terlalu banyak logika ke template Anda. Dengan kata lain, Anda perlu memecahnya menjadi template yang lebih kecil?
Kazim Zaidi
1
@KazimZaidi, bagaimana jika Anda memiliki satu bagian data dengan lebih dari tiga status yang memerlukan pemformatan berbeda dalam setiap kasus? Anda mungkin bisa memaksa gaya CSS ke dalam data itu sendiri, tetapi kemudian Anda mendorong masalah tingkat tampilan ke dalam data Anda. Saya bisa membayangkan kasus yang masuk akal untuk if / elseif / endif construct (atau bahkan switch / match).
Drew Noakes
1
melihat ini lagi, saya merasa ini bisa dilakukan melalui atribut binding.
Kazim Zaidi
1
Saya pikir metode yang lebih disukai adalah melewati bendera boolean dan mengkondisikan mereka. Terserah Anda untuk mengatur bendera dengan benar sehingga hanya satu kondisi yang bernilai true. Tidak perlu untukelse if
chovy
Saya sarankan Anda melakukan ini dengan fungsi pembantu untuk memisahkan logika bisnis Anda dari presentasi.
Max Hodges
76

Saya biasanya menggunakan formulir ini:

{{#if FriendStatus.IsFriend}}
  ...
{{else}} {{#if FriendStatus.FriendRequested}}
  ...
{{else}}
  ...
{{/if}}{{/if}}
Drinor
sumber
Tip yang bagus, terima kasih. Apakah ini reaktif secara default?
kylemclaren
2
Terlihat cantik dengan hanya 1 yang lain jika, tetapi semakin banyak yang Anda miliki, semakin lama daftar terakhir untuk menutup jika -{{/if}}{{/if}}{{/if}}{{/if}}{{/if}}
jbyrd
1
Tidak, ini bukan "bersih" itu lebih buruk.
gen b.
37

Setang sekarang mendukung {{else if}}pada 3.0.0. Karena itu, kode Anda sekarang harus berfungsi.

Anda dapat melihat contoh di bawah "conditional" (sedikit direvisi di sini dengan menambahkan {{else}}:

    {{#if isActive}}
      <img src="star.gif" alt="Active">
    {{else if isInactive}}
      <img src="cry.gif" alt="Inactive">
    {{else}}
      <img src="default.gif" alt="default">
    {{/if}}

http://handlebarsjs.com/block_helpers.html

Don O
sumber
4
Ini harus menjadi jawaban baru!
Saad Malik
tidak berfungsi untuk saya (kesalahan sintaks pada templat). Meteor 1.2.0.2
dragonmnl
@dragonmnl Versi Handlebars mana yang digunakan Meteor 1.2.0.2? Pastikan Anda menggunakan 3.0.
Don O
Saya menggunakan versi default. Bagaimana cara memeriksa versi stang?
dragonmnl
@dragonmnl Sepertinya Meteor menggunakan bahasa templatnya sendiri yang disebut Spacebars . Jika itu masalahnya, maka saya tidak yakin ini mendukung {{else if}}sintaks.
Don O
37

Semangat setang adalah bahwa ia "tidak logis". Kadang-kadang ini membuat kita merasa seperti sedang berjuang dengan itu, dan kadang-kadang kita berakhir dengan logika jelek jika / selain itu. Anda bisa menulis pembantu; banyak orang menambah setang dengan operator bersyarat "lebih baik" atau percaya bahwa itu harus menjadi bagian dari inti . Saya pikir, bahwa alih-alih ini,

{{#if FriendStatus.IsFriend}}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{else}}
  {{#if FriendStatus.FriendRequested}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
  {{else}}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
  {{/if}}
{{/if}}

Anda mungkin ingin mengatur hal-hal dalam model Anda sehingga Anda dapat memiliki ini,

{{#if is_friend }}
  <div class="ui-state-default ui-corner-all" title=".ui-icon-mail-closed"><span class="ui-icon ui-icon-mail-closed"></span></div>
{{/if}}

{{#if is_not_friend_yet }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-check"><span class="ui-icon ui-icon-check"></span></div>
{{/if}}

{{#if will_never_be_my_friend }}
    <div class="ui-state-default ui-corner-all" title=".ui-icon-plusthick"><span class="ui-icon ui-icon-plusthick"></span></div>
{{/if}}

Pastikan hanya satu dari bendera ini yang benar. Kemungkinannya adalah, jika Anda menggunakan ini if/elsif/elsedalam tampilan Anda, Anda mungkin menggunakannya di tempat lain juga, jadi variabel-variabel ini mungkin tidak menjadi berlebihan.

Jaga agar tetap ramping.

Ziggy
sumber
1
Saya tidak yakin seberapa baik praktiknya, tetapi ini muncul untuk saya hari ini dengan menangani 3 tampilan berbeda dan saya akhirnya menggunakan solusi berdasarkan ini (logika otherif mereka tidak diperlukan karena mereka semua memeriksa terhadap satu nilai) stackoverflow.com/questions/15008564/… Jadi, alih-alih #jika _is_friend, Anda dapat menggunakan string dengan penolong yang sangat sederhana (dalam jawaban mereka); #if friend_type "is_friend" dan #if friend_type "is_not_friend_yet"
Dylan Reich
Jawaban ini adalah apa yang saya anggap solusi terbaik pra setang 3.0, saya pikir HTML tambahan lebih baik daripada mencoba menjejalkan logika ke Pohon DOM.
David O'Regan
7

Saya menulis pembantu sederhana ini:

Handlebars.registerHelper('conditions', function (options) {
    var data = this;
    data.__check_conditions = true;
    return options.fn(this);
});


Handlebars.registerHelper('next', function(conditional, options) {
  if(conditional && this.__check_conditions) {
      this.__check_conditions = false;
      return options.fn(this);
  } else {
      return options.inverse(this);
  }
});

Ini seperti pola Rantai Tanggung Jawab dalam Setang

Contoh:

    {{#conditions}}
        {{#next condition1}}
            Hello 1!!!
        {{/next}}
        {{#next condition2}}
            Hello 2!!!
        {{/next}}
        {{#next condition3}}
            Hello 3!!!
        {{/next}}
        {{#next condition4}}
            Hello 4!!!
        {{/next}}
    {{/conditions}}

Ini bukan yang lain jika tetapi dalam beberapa kasus dapat membantu Anda)

Kirill Ermolov
sumber
1

Pembantu Bawaan

#if

Anda bisa menggunakan penolong if untuk membuat blok secara kondisional. Jika argumennya menghasilkan false, undefined, null, "", 0, atau [], Setang tidak akan merender blokir.

templat

<div class="entry">
  {{#if author}}
    <h1>{{firstName}} {{lastName}}</h1>
  {{else}}
    <h1>Unknown Author</h1>
  {{/if}}
</div>

Saat Anda memasukkan input berikut ke templat di atas

{
  author: true,
  firstName: "Yehuda",
  lastName: "Katz"
}
Tuan Rumah
sumber
0

Halo Saya hanya memiliki edit nama kelas MINOR, dan sejauh ini beginilah cara saya mengungkapkannya. saya pikir saya harus memberikan parameter multpile ke helper,

server.js

app.engine('handlebars', ViewEngine({
        "helpers":{
                isActive: (val, options)=>{
                    if (val === 3 || val === 0){
                        return options.fn(this)
                    }
                } 
        }
}));

header.handlebars

<ul class="navlist">
          <li   class="navitem navlink {{#isActive 0}}active{{/isActive}}"
                ><a href="#">Home</a></li>
          <li   class="navitem navlink {{#isActive 1}}active{{/isActive}}"
                ><a href="#">Trending</a></li>
          <li   class="navitem navlink {{#isActive 2}}active{{/isActive}}"
                ><a href="#">People</a></li>
          <li   class="navitem navlink {{#isActive 3}}active{{/isActive}}"
                ><a href="#">Mystery</a></li>
          <li class="navitem navbar-search">
            <input type="text" id="navbar-search-input" placeholder="Search...">
            <button type="button" id="navbar-search-button"><i class="fas fa-search"></i></button>
          </li>
        </ul>
Maddocks
sumber