Handlebars.js Else If

241

Handlebars.js istemci yan görünüm oluşturma için kullanıyorum. Else harika çalışıyorsa, ancak ELSE IF gerektiren 3 yollu bir koşulla karşılaşırsam:

Bu işe yaramaz:

{{#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}}

Gidonlarla ELSE IF nasıl yapılır?

handlebars.js

— reach4thelasers
kaynak

Gidon güncellemelerine bir göz atın,

— Jacob van Lingen

376

Gidonlar {{else if}}3.0.0 itibariyle blokları destekler .

Gidon v3.0.0 veya daha üstü:

{{#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}}

Ancak Gidon v3.0.0'dan önce, dallanma mantığını veya yuva ififadelerini elle işleyen bir yardımcı tanımlamanız gerekir:

{{#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
kaynak

6

gidonlarda şablonunuza çok fazla mantık koyduğunuz bir elsif (ya da if) olmamasıdır. Başka bir deyişle, onu daha küçük şablonlara bölmeniz mi gerekiyor?

— Kazim Zaidi

1

@KazimZaidi, her durumda farklı biçimlendirme gerektiren üçten fazla durum içeren tek bir veri parçanız varsa ne olur? Bir CSS stilini verilerin kendisine zorlayabilirsiniz, ancak daha sonra görünüm düzeyindeki endişeleri verilerinize itersiniz. Bir if / elseif / endif yapısı (hatta bir anahtar / eşleşme) için mantıklı durumlar hayal edebiliyorum.

— Drew Noakes

1

buna tekrar baktığımda, bunun nitelik bağlamaları ile yapılabileceğini hissediyorum.

— Kazim Zaidi

1

Bence tercih edilen yöntem boole bayraklarını geçmek ve koşullu hale getirmektir. Bayrakları yalnızca tek bir koşul doğru olarak değerlendirilecek şekilde ayarlamak size kalmıştır. Gerek yokelse if

— chovy

Bunu, iş mantığınızı sunumdan ayırmak için yardımcı bir işlevle yapmanızı öneririm.

— Max Hodges

76

Genellikle bu formu kullanırım:

{{#if FriendStatus.IsFriend}}
  ...
{{else}} {{#if FriendStatus.FriendRequested}}
  ...
{{else}}
  ...
{{/if}}{{/if}}

— drinor
kaynak

İyi ipucu, teşekkürler. Bu varsayılan olarak reaktif olur mu?

— kylemclaren

2

Eğer sadece 1 tane ile güzel görünüyor, ama ne kadar fazla varsa, o zaman kapanış son kapanış listesi daha uzun -{{/if}}{{/if}}{{/if}}{{/if}}{{/if}}

— jbyrd

1

Hayır, "daha temiz" değil, daha çirkin.

— gen b.

37

Gidonlar artık 3.0.0'dan itibaren destekleniyor {{else if}}. Bu nedenle, kodunuzun şimdi çalışması gerekir.

"Koşullar" altında bir örnek görebilirsiniz (burada bir eklenti ile biraz revize edilmiştir {{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

— Yapma
kaynak

4

Bu yeni cevap olmalı!

— Saad Malik

benim için çalışmıyor (şablonda sözdizimi hatası). Meteor 1.2.0.2

— dragonmnl

@dragonmnl Meteor 1.2.0.2 hangi Gidon kollarını kullanıyor? 3.0 kullandığınızdan emin olun.

— Don O

Varsayılan sürümü kullanıyorum. Gidon versiyonunu nasıl kontrol ederim?

— dragonmnl

@dragonmnl Görünüşe göre Meteor, Ara Çubuğu adı verilen kendi şablon dilini kullanıyor . Bu durumda, {{else if}}sözdizimini desteklediğinden emin değilim .

— Don O

37

Gidonların ruhu, "mantıksız" olmasıdır. Bazen bu onunla savaştığımızı hissettirir ve bazen çirkin iç içe if / else mantığı ile sonuçlanırız. Sen olabilir bir yardımcı yazma; birçok kişi "daha iyi" koşullu bir operatörle gidonu arttırır veya çekirdeğin bir parçası olması gerektiğine inanır . Bence bunun yerine,

{{#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}}

bunu yapabilmeniz için modelinizdeki şeyleri düzenlemek isteyebilirsiniz,

{{#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}}

Sadece bu bayraklardan sadece birinin doğru olduğundan emin olun. Muhtemelen, bunu if/elsif/elsesizin görüşünüzde kullanıyorsanız, muhtemelen başka bir yerde de kullanıyorsunuzdur, bu nedenle bu değişkenler gereksiz olmayabilir.

Yalın tutun.

— Ziggy
kaynak

1

Bir uygulamanın ne kadar iyi olduğundan emin değilim, ama bu benim için bugün 3 farklı görüş durumunu ele aldı ve bunu temel alan bir çözüm kullandım (hepsi kontrol ettikleri için elseif mantığı gerekli değil) bir değer) stackoverflow.com/questions/15008564/… #if _is_friend yerine, çok basit bir yardımcıya sahip bir dize kullanabilirsiniz (yanıtlarında); #if friend_type "is_friend" ve #if friend_type "is_not_friend_yet"

— Dylan Reich

Bu cevap ben en iyi çözüm ön gidon 3.0 düşünün ne olduğunu, ben ekstra HTML mantık DOM ağacı içine tıkmak için çalışmanın aksine daha iyi olduğunu düşünüyorum.

— David O'Regan

7

Bu basit yardımcıyı yazdım:

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);
  }
});

Gidonlardaki Sorumluluk Zinciri modeli gibi bir şey

Misal:

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

Bu başka bir şey değildir , ancak bazı durumlarda size yardımcı olabilir)

— Kirill Ermolov
kaynak

1

Yerleşik Yardımcılar

#if

Koşullu olarak bir blok oluşturmak için if yardımcısını kullanabilirsiniz. Argümanı false, undefined, null, "", 0 veya [] döndürürse, Gidon blokları oluşturmaz.

şablon

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

Aşağıdaki şablonu yukarıdaki şablona ilettiğinizde

{
  author: true,
  firstName: "Yehuda",
  lastName: "Katz"
}

— Abdo-Sunucu
kaynak

0

Merhaba Ben sadece bir MINOR sınıf adı düzenleme var ve şimdiye kadar iv bu divulged. sanırım yardımcıya çok katlı parametreler geçirmem gerekiyor,

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
kaynak