pug เพิ่ม / ลบชื่อคลาสโดยตัวแปรจาก NodeJS

Aug 20 2020

ฉันมีเทมเพลตปั๊กที่ควรแสดงข้อความสีแดงเมื่อมีการส่งคืนข้อผิดพลาดและข้อความสีเขียวเมื่อการดำเนินการสำเร็จ

ฉันมีปัญหาในการตั้ง<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 ได้อย่างไร

คำตอบ

2 kmgt Aug 20 2020 at 20:31

การเพิ่มชื่อคลาสตามเงื่อนไขสามารถทำได้โดย:

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">
1 CybeX Aug 20 2020 at 22:03

หลังจากการทดสอบการอ่าน / การค้นหาเพิ่มเติม ฯลฯ ฉันพบวิธีแก้ปัญหาที่ใช้งานได้ ฉันไม่แนะนำให้ใช้วิธีแก้ปัญหาของฉันฉันกำลังโพสต์มันเป็น 'ก้าวสำคัญ' ของวิธีที่ฉันใช้วิธีแก้ปัญหาตามการอ่านคำแนะนำฟอรัมและอื่น ๆ ของฉัน

หมายเหตุฉันไม่ทราบ()ไวยากรณ์ของวงเล็บณ จุดที่กำลังหาวิธีแก้ปัญหา

//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 แทน