NodeJS से चर द्वारा वर्ग नाम जोड़ें / निकालें

Question

मेरे पास एक पग टेम्पलेट है जिसमें एक त्रुटि वापस आने और ऑपरेशन सफल होने पर हरे रंग के पाठ को लाल पाठ प्रदर्शित करना चाहिए।

मुझे अपने NodeJS बैकएंड से लौटी प्रतिक्रिया के <p/>आधार पर classname (s) सेट करने में कठिनाई होती है status।

मेरा 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>

ऐसा कुछ करना कई वर्गों और राज्यों, आदि के मामले में काफी काउंटर उत्पादक और हास्यास्पद लगता है (नीचे जो काम नहीं करता है - सबसे अधिक संभावना है कि मैं कुछ गलत कर रहा हूं: स्रोत )।

if (status)
    p.text-success#lblMessage #{message}
else
    p.text-warning#lblMessage #{message}

मैं पग टेम्पलेट में HTML तत्वों की कक्षाओं को जोड़ने / बदलने / हटाने के लिए NodeJS बैकएंड से पारित चर का उपयोग कैसे कर सकता हूं?

Answer 1

सशर्त वर्गनाम जोड़ने से इसे प्राप्त किया जा सकता है:

p#lblMessage(class=(status  ? 'text-success' : 'text-warning')) #{message}

उपरोक्त कोड और आपके उल्लेखित उदाहरण के बीच का अंतर समझाने के लिए :

classविशेषता कोई स्ट्रिंग हो रही है, बन्दर मूल्य के रूप में इस का उपयोग करें। यदि एक बूलियन वापस लौटाया जाता है (या अशक्त), तो गुण स्वयं प्रदान किया जाता है या नहीं। एक चेकबॉक्स:

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

Answer 2

कुछ परीक्षण, अधिक पढ़ने / खोजने, आदि के बाद मुझे एक काम करने वाला समाधान मिला। मैं अपने समाधान का उपयोग करने की अनुशंसा नहीं करता, मैं इसे 'स्टेपिंग स्टोन' के रूप में पोस्ट कर रहा हूं कि कैसे मैं अपने सुझावों, मंचों आदि पर पढ़ने के आधार पर समाधान के लिए कैम करता हूं।

ध्यान दें, मैं ()एक समाधान खोजने के बिंदु पर कोष्ठक वाक्य रचना से अवगत नहीं था

//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 के समाधान का उपयोग करने का सुझाव देता हूं