pug เพิ่ม / ลบชื่อคลาสโดยตัวแปรจาก NodeJS
ฉันมีเทมเพลตปั๊กที่ควรแสดงข้อความสีแดงเมื่อมีการส่งคืนข้อผิดพลาดและข้อความสีเขียวเมื่อการดำเนินการสำเร็จ
ฉันมีปัญหาในการตั้ง<p/>
ชื่อคลาสตามการstatus
ตอบกลับที่ส่งกลับจากแบ็กเอนด์ NodeJS ของฉัน
NodeJS ของฉันแสดงผลหน้าของฉันดังนี้:
router.get('/forgot-password',
session.ensureNotLoggedIn('/user/dashboard'),
(req, res, next) => {
res.render("forgot-password");
});
router.post('/forgot-password',
session.ensureNotLoggedIn('/user/logout'),
(req, res, next) => {
if (!req.body.edtEmail) {
res.render("forgot-password");
}
emailer.sendVerifyEmail().then(value => {
res.render("forgot-password", {message: "Email sent, check your inbox!", status: true});
}).catch(reason => {
res.render("forgot-password", {message: "Failed to send email [" + reason + "]", status: false});
})
});
กุญแจสำคัญที่นำออกไปคือ{ message: [string], status: [bool] }
. ฉันจำเป็นต้องแสดงผลmessage
และขึ้นอยู่กับstatus
ว่าควรมีคลาสtext-danger
หรือtext-success
ถ้าล้มเหลวหรือประสบความสำเร็จตามลำดับ
ด้านล่างนี้เป็นวิธีการต่างๆที่ฉันลองแล้วไม่ประสบความสำเร็จ เพื่อชี้แจงว่าstatus
ค่านี้false
ควรเพิ่มtext-danger
คลาส
ในเทมเพลตปั๊กของฉัน:
ฉันได้ลองแล้ว (ที่มา ):
p#lblMessage(class = status ? text-success : text-warning) #{message}
การแสดงผล
<p id="lblMessage">Failed to send email [true]</p>
พยายาม (ที่มา):
p#lblMessage(class="#{status ? text-success : text-warning}") #{message}
การแสดงผล:
<p class="#{status ? text-success : text-warning}" id="lblMessage">Failed to send email [true]</p>
พยายาม (ที่มา ):
p#lblMessage(class = "#{status ? text-success : text-warning}") #{message}
การแสดงผล:
<p class="#{status ? text-success : text-warning}" id="lblMessage">Failed to send email [true]</p>
การทำสิ่งนี้ดูเหมือนจะเป็นการตอบโต้ที่ได้ผลและไร้สาระในกรณีที่มีหลายคลาสและสถานะ ฯลฯ (ด้านล่างซึ่งไม่ได้ผล ofc - เป็นไปได้มากว่าฉันทำอะไรผิด: ที่มา )
if (status)
p.text-success#lblMessage #{message}
else
p.text-warning#lblMessage #{message}
ฉันจะใช้ตัวแปรที่ส่งผ่านจากแบ็กเอนด์ NodeJS เพื่อเพิ่ม / แก้ไข / ลบคลาสขององค์ประกอบ html ในเทมเพลต pug ได้อย่างไร
คำตอบ
การเพิ่มชื่อคลาสตามเงื่อนไขสามารถทำได้โดย:
p#lblMessage(class=(status ? 'text-success' : 'text-warning')) #{message}
เพื่ออธิบายความแตกต่างระหว่างโค้ดด้านบนและตัวอย่างที่คุณกล่าวถึง:
class
แอตทริบิวต์จะได้รับสตริงปั๊ใช้นี้เป็นมูลค่า หากบูลีนถูกส่งกลับ (หรือโมฆะ) แอตทริบิวต์ self จะได้รับการแสดงผลหรือไม่ เช่นช่องทำเครื่องหมาย:
input(type='checkbox', checked=(1===1 ? true : false))
input(type='checkbox', checked=(1===2 ? true : false))
rendered to:
<input type="checkbox" checked="checked">
<input type="checkbox">
หลังจากการทดสอบการอ่าน / การค้นหาเพิ่มเติม ฯลฯ ฉันพบวิธีแก้ปัญหาที่ใช้งานได้ ฉันไม่แนะนำให้ใช้วิธีแก้ปัญหาของฉันฉันกำลังโพสต์มันเป็น 'ก้าวสำคัญ' ของวิธีที่ฉันใช้วิธีแก้ปัญหาตามการอ่านคำแนะนำฟอรัมและอื่น ๆ ของฉัน
หมายเหตุฉันไม่ทราบ()
ไวยากรณ์ของวงเล็บณ จุดที่กำลังหาวิธีแก้ปัญหา
//this first line is in the case of a GET, so the <p/> isn't rendered
if status !== undefined
p#lblMessage(class=status ? "text-success" : "text-danger") #{message}
เมื่อใช้ WebStorm ฉันสังเกตเห็นข้อผิดพลาดทางไวยากรณ์ที่เป็นไปได้ (อย่างไรก็ตามหน้าคอมไพล์ถูกต้อง):

ฉันแนะนำให้ใช้โซลูชันของ @ kmgt แทน