ฉันจะบรรลุ if / else ใน mustache.js ได้อย่างไร

258

ดูเหมือนว่าค่อนข้างแปลกที่ฉันไม่สามารถคิดวิธีการทำสิ่งนี้ในหนวด รองรับหรือไม่

นี่คือความพยายามเศร้าของฉันที่พยายาม:

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

เห็นได้ชัดว่ามันไม่ถูกต้อง แต่เอกสารไม่ได้กล่าวถึงสิ่งนี้ คำว่า "else" ไม่ได้กล่าวถึง :(

ทำไมหนวดจึงถูกออกแบบมาในลักษณะนี้? เรื่องแบบนี้ถือว่าไม่ดีเหรอ? พยายามบังคับให้ฉันตั้งค่าเริ่มต้นในตัวแบบเองหรือไม่? เกี่ยวกับกรณีที่ไม่สามารถทำได้

javascript templates mustache

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

1

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

— Paul D. Waite

4

@ PaulD.Waite "ลอจิกน้อย" จริงๆหมายถึง "รหัสที่ไม่มีกฎเกณฑ์" ฉันคิดว่า การใส่ตรรกะการดูที่แท้จริงในโค้ดนั้นไม่ดีเท่าที่จะเป็นการวางตรรกะที่ไม่ใช่มุมมองในเทมเพลต หนวดพยายามที่จะให้ตรรกะขั้นต่ำเปลือยเพื่อให้บรรลุ

— jpmc26

2

หรือใช้แฮนด์บาร์แทนหนวด ความสามารถในการเขียนเช่น{{#each items}}{{#unless @first}}Output comma before 2nd, 3rd, 4th...{{/unless}}{{/each}}สามารถอ่านได้มากขึ้นสะอาดกว่าและยังคงเป็นการนำเสนอ "ลอจิกน้อย" เป็นแนวทางก็ไม่จำเป็นต้องเป็นคับแคบ

— skierpage

บางทีมันอาจจะไม่ใช่เอนจิ้น templating เอนกประสงค์พอเมื่อ OP บอกว่า "นี่เป็นความพยายามที่น่าเศร้าของฉัน [... ] เห็นได้ชัดว่าไม่ถูกต้อง" ... และจากนั้นคำตอบที่ได้รับการยอมรับคือสำเนาของรหัสนั้น :) ไม่มีการตัดสิน OP หรือคำตอบ เพิ่งmustache

— dwanderson

498

นี่คือวิธีที่คุณทำถ้า / อื่น ๆ ในหนวด (รองรับอย่างสมบูรณ์):

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

หรือในกรณีของคุณ:

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

ค้นหาส่วนที่กลับด้านในเอกสาร: https://github.com/janl/mustache.js

— Eneko Alonso
แหล่งที่มา

88

เอกสารหนวดมีเฮฮา "เราเรียกมันว่า" ลอจิกน้อย "เพราะไม่มีคำสั่ง, ประโยคอื่นหรือลูป" Yeeeeaaaaaa ....

— วางกล่อง

6

@ กล่องเทคนิคที่ถูกต้องส่วนกลับเป็นคำสั่งตรรกะที่ตรวจสอบค่าแท็ก แต่ฉันคิดว่าความแตกต่างกันนิดหน่อยที่นี่ก็คือทั้งสองงบจะต้องมีการประเมินอย่างชัดเจนมากกว่า / ถ้าเป็นอย่างอื่น โดยทั่วไปกองกำลังหนวดโครงสร้างตามมาด้วยif (condition){ //do something} if (!condition){//do something else}นอกจากนี้ปริมาณของตรรกะที่สามารถดำเนินการในตรรกะลดลงอย่างมากเมื่อเทียบกับภาษาที่ใช้ตรรกะ การมีอยู่หรือไม่มีอยู่เป็นการตรวจสอบเพียงอย่างเดียวนั่นคือคุณไม่สามารถตรวจสอบว่าค่าของแท็กเท่ากับ 5 แล้วตกอยู่ในรหัสของแท็กนั้นหรือไม่

— MandM

22

@MandM ใช่ ... ดังนั้นมันมีเหตุผล แต่มันก็ไม่สามารถทำสิ่งที่มีประโยชน์: P

— กล่อง

มันทำให้คุณไม่ยุ่งกับตรรกะอื่น ๆ มีจำนวนมากซ้อนกันถ้า / อื่น ๆ ภายในอื่นถ้า / อื่นเป็นสัญญาณของการออกแบบที่ผิด

— Tebe

กล่อง @ คุณสามารถทำเพื่อห่วงกับ moustache.js (อย่างน้อย ngFor-ish วน)

— aloisdg ย้ายไป codidact.com

54

นี่คือสิ่งที่คุณแก้ไขใน "ตัวควบคุม" ซึ่งเป็นจุดของการสร้างเทมเพลตแบบไม่มีตรรกะ

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

}

นี่เป็นสิ่งที่ดีกว่ามากแล้วรักษา URL ของภาพหรือสื่ออื่น ๆ ที่อาจจะมีหรือไม่มีการเปลี่ยนแปลงในแม่แบบของคุณ ประเด็นคือเพื่อปลดปล่อยการมองเห็นเทมเพลตอุโมงค์เทมเพลต avatar img url ถูกผูกไว้เพื่อใช้กับเทมเพลตอื่นคุณจะดูแล url นั้นบนเทมเพลต X หรือวัตถุการตั้งค่าเริ่มต้นเดียวหรือไม่ ;)

ตัวเลือกอื่นคือทำดังต่อไปนี้:

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

และในเทมเพลต:

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

แต่มันขัดแย้งกับความหมายทั้งหมดของการสร้างเทมเพลตแบบไร้ตรรกะ หากนั่นคือสิ่งที่คุณต้องการทำคุณต้องการการสร้างเทมเพลตแบบลอจิคัลและคุณไม่ควรใช้หนวดแม้ว่าจะให้โอกาสคุณได้เรียนรู้แนวคิดนี้;

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

ขอบคุณ นั่นเป็นคำตอบที่ยอดเยี่ยม! จริง ๆ แล้วมันช่วยฉันในด้านโครงสร้างอื่น ๆ เกี่ยวกับ "เมื่อทำสิ่งต่างๆ" ในโครงสร้างของรหัสจาวาสคริปต์

— egervari

{{/ # hasAvatar}} และ {{/ # noAvatar}} ควรเป็น {{/ hasAvatar}} และ {{/ noAvatar}} ในคำตอบนี้

— Mulhoon

14

ข้อความอื่นของคุณควรมีลักษณะเช่นนี้ (หมายเหตุ^):

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

ในหนวดนี้เรียกว่า 'ส่วนกลับหัว'

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

7

โปรดทราบว่าคุณไม่จำเป็นต้องใช้ทั้ง # และ ^ มันเป็นเพียง ^ สำหรับกรณี 'not'

— zappan

ที่ไม่ทำงานในรุ่นล่าสุด Zappan ถูกต้องคุณต้องใช้ ^

— simonmorley

0

คุณสามารถกำหนดผู้ช่วยได้ในมุมมอง อย่างไรก็ตามตรรกะเงื่อนไขมีค่อนข้าง จำกัด Moxy-Stencil ( https://github.com/dcmox/moxyscript-stencil ) ดูเหมือนจะพูดถึงเรื่องนี้กับผู้ช่วย "แปรสภาพ" เช่น:

และในมุมมอง:

view.isActive = ฟังก์ชั่น (เส้นทาง: สตริง) {เส้นทางกลับ === this.path? "class = 'active'": ''}

— แดเนียล
แหล่งที่มา

0

หมายเหตุคุณสามารถใช้{{.}}เพื่อแสดงรายการบริบทปัจจุบัน

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

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

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