Handlebars.js ถ้าอย่างนั้น

241

ฉันกำลังใช้ Handlebars.js สำหรับการแสดงภาพด้านข้างลูกค้า ถ้าอื่นทำงานได้ดี แต่ฉันได้พบกับเงื่อนไขแบบ 3 ทางที่ต้องใช้ ELSE IF:

สิ่งนี้ใช้ไม่ได้:

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

ฉันจะทำอย่างไรหากใช้แฮนด์บาร์

handlebars.js

— reach4thelasers
แหล่งที่มา

ติดตามการอัพเดทแฮนด์แฮนด์ดูเหมือนว่าจะมีการใช้งานในไม่ช้า: github.com/wycats/handlebars.js/pull/892

— Jacob van Lingen

376

แฮนด์บาร์รองรับ{{else if}}บล็อกตั้งแต่ 3.0.0

Handlebars v3.0.0 หรือสูงกว่า:

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

อย่างไรก็ตามก่อนที่จะ Handlebars v3.0.0 คุณจะต้องกำหนดผู้ช่วยที่จัดการกับการแยกทางตรรกะหรือifคำสั่งซ้อนด้วยตนเอง:

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

— คาร์ล
แหล่งที่มา

6

เป็นจุดที่ไม่มีเอลฟ์ (หรืออย่างอื่นถ้า) ในแฮนด์บาร์ที่คุณใส่ตรรกะมากเกินไปในเทมเพลตของคุณ คุณต้องแบ่งมันออกเป็นเทมเพลตขนาดเล็กหรือไม่

— Kazim Zaidi

1

@KazimZaidi จะเป็นอย่างไรถ้าคุณมีข้อมูลชิ้นเดียวที่มีมากกว่าสามสถานะซึ่งต้องใช้การจัดรูปแบบที่แตกต่างกันในแต่ละกรณี คุณอาจบังคับ CSS สไตล์ให้กับข้อมูล แต่จากนั้นคุณก็ผลักดันข้อกังวลระดับมุมมองไปสู่ข้อมูลของคุณ ฉันสามารถจินตนาการกรณีที่สมเหตุสมผลสำหรับการสร้าง if / elseif / endif (หรือแม้แต่สวิตช์ / การจับคู่)

— Drew Noakes

1

เมื่อมองดูสิ่งนี้อีกครั้งฉันรู้สึกว่านี่สามารถทำได้ผ่านการโยงแอตทริบิวต์

— Kazim Zaidi

1

ฉันคิดว่าวิธีที่ต้องการคือการส่งธงบูลีนและกำหนดเงื่อนไขให้พวกเขา มันขึ้นอยู่กับคุณในการตั้งค่าแฟล็กอย่างถูกต้องซึ่งมีเพียงเงื่อนไขเดียวเท่านั้นที่ประเมินว่าเป็นจริง ไม่จำเป็นต้องelse if

— chovy

ฉันขอแนะนำให้คุณทำเช่นนี้ด้วยฟังก์ชันตัวช่วยเพื่อแยกตรรกะทางธุรกิจของคุณออกจากการนำเสนอ

— Max Hodges

76

ฉันมักจะใช้แบบฟอร์มนี้:

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

— drinor
แหล่งที่มา

เคล็ดลับดีขอบคุณ สิ่งนี้จะเป็นปฏิกิริยาโดยค่าเริ่มต้นหรือไม่

— kylemclaren

2

หน้าตาสวยด้วยเพียง 1 อื่นถ้า แต่ยิ่งคุณมีอีกต่อไปว่ารายการสุดท้ายของการปิดถ้าได้รับของ -{{/if}}{{/if}}{{/if}}{{/if}}{{/if}}

— jbyrd

1

ไม่มันไม่ใช่ "สะอาดกว่า" มันน่าเกลียด

— ยีน b

37

แฮนด์บาร์รองรับได้{{else if}}ตั้งแต่ 3.0.0 ดังนั้นรหัสของคุณควรทำงาน

คุณสามารถดูตัวอย่างภายใต้ "เงื่อนไข" (แก้ไขเล็กน้อยที่นี่พร้อมกับเพิ่ม{{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

— ดอนโอ
แหล่งที่มา

4

นี่ควรเป็นคำตอบใหม่!

— Saad Malik

ไม่ทำงานสำหรับฉัน (ข้อผิดพลาดทางไวยากรณ์ในแม่แบบ) ดาวตก 1.2.0.2

— dragonmnl

@dragonmnl Handlebars รุ่นใดที่ใช้ Meteor 1.2.0.2? ตรวจสอบให้แน่ใจว่าคุณใช้ 3.0

— Don O

ฉันใช้รุ่นเริ่มต้น ฉันจะตรวจสอบเวอร์ชั่นของมือจับได้อย่างไร

— dragonmnl

@dragonmnl ดูเหมือนว่าดาวตกใช้ภาษาแม่แบบของตัวเองที่เรียกว่าSpacebars หากเป็นเช่นนั้นฉันไม่แน่ใจว่ารองรับ{{else if}}ไวยากรณ์หรือไม่

— Don O

37

จิตวิญญาณของแฮนด์บาร์คือ "ไร้เหตุผล" บางครั้งสิ่งนี้ทำให้เรารู้สึกว่าเรากำลังต่อสู้กับมันและบางครั้งเราก็จบลงด้วยการซ้อนกันน่าเกลียดถ้า / อื่นตรรกะ คุณสามารถเขียนผู้ช่วย; หลายคนแฮนด์ขยายกับ "ดี" ผู้ประกอบการมีเงื่อนไขหรือเชื่อว่ามันควรจะเป็นส่วนหนึ่งของหลัก ฉันคิดว่าแทนที่จะเป็นอย่างนี้

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

คุณอาจต้องการจัดเรียงสิ่งต่าง ๆ ในแบบจำลองของคุณเพื่อให้ได้สิ่งนี้

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

ตรวจสอบให้แน่ใจว่ามีเพียงหนึ่งในธงเหล่านี้ที่เป็นจริง มีโอกาสที่ถ้าคุณใช้สิ่งนี้if/elsif/elseในมุมมองของคุณคุณอาจใช้มันในที่อื่นด้วยเช่นกันดังนั้นตัวแปรเหล่านี้อาจไม่ได้รับการฟุ่มเฟือย

ทำให้มันผอม

— Ziggy
แหล่งที่มา

1

ฉันไม่แน่ใจว่ามันเป็นการฝึกฝนที่ดีเพียงใด แต่สิ่งนี้เกิดขึ้นสำหรับฉันในวันนี้ที่จัดการมุมมองที่แตกต่างกัน 3 สถานะและฉันก็ลงเอยด้วยการใช้โซลูชันที่ยึดตามสิ่งนี้ (ตรรกะอื่น ๆ ของพวกเขาไม่จำเป็น หนึ่งค่า) stackoverflow.com/questions/15008564/…ดังนั้นแทนที่จะ #if _is_friend คุณสามารถใช้สตริงที่มีตัวช่วยง่าย ๆ (ในคำตอบ) #if friend_type "is_friend" และ #if friend_type "is_not_friend_yet"

— Dylan Reich

คำตอบนี้คือสิ่งที่ฉันจะพิจารณาทางออกที่ดีที่สุดก่อนจัดการ 3.0 ฉันคิดว่า HTML พิเศษจะดีกว่าเมื่อเทียบกับการพยายามยัดตรรกะลงในทรี DOM

— David O'Regan

7

ฉันเขียนผู้ช่วยง่าย ๆ นี้:

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

มันเหมือนกับรูปแบบChain Of Responsibilityในแฮนด์บาร์

ตัวอย่าง:

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

ไม่ใช่ในกรณีอื่นแต่ในบางกรณีอาจช่วยคุณได้)

— Kirill Ermolov
แหล่งที่มา

1

ผู้ช่วยในตัว

#if

คุณสามารถใช้ตัวช่วย if เพื่อสร้างบล็อกแบบมีเงื่อนไข หากอาร์กิวเมนต์ส่งคืน false, undefined, null, "", 0 หรือ [], Handlebars จะไม่แสดงผลบล็อก

แบบ

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

เมื่อคุณส่งอินพุตต่อไปนี้ไปยังเทมเพลตด้านบน

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

— Abdo เจ้าภาพ
แหล่งที่มา

0

สวัสดีฉันมีการแก้ไขชื่อคลาสเพียงเล็กน้อยและจนถึงตอนนี้นี่เป็นวิธีที่ iv เปิดเผย ฉันคิดว่าฉันต้องผ่านพารามิเตอร์หลายค่าไปยังผู้ช่วย

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
แหล่งที่มา