pug menambahkan / menghapus nama kelas dengan variabel dari NodeJS

Question

Saya memiliki template pug yang seharusnya menampilkan teks merah ketika kesalahan dikembalikan dan teks hijau ketika operasi berhasil.

Saya mengalami kesulitan mengatur nama kelas <p/>berdasarkan statusrespons yang dikembalikan dari backend NodeJS saya.

NodeJS saya merender halaman saya sebagai berikut:

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

Kuncinya adalah { message: [string], status: [bool] }. Saya perlu merender message, dan berdasarkan status, harus memiliki kelas text-dangeratau text-successjika gagal atau berhasil masing-masing.

Di bawah ini adalah berbagai metode yang telah saya coba tanpa hasil. Untuk memperjelas, statusnilai falseyang harus menambah text-dangerkelas.

---

Di template pug saya:

• Saya sudah mencoba ( sumber ):

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

rendering

<p id="lblMessage">Failed to send email [true]</p>

• Mencoba (sumber):

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

rendering:

<p class="#{status ? text-success : text-warning}" id="lblMessage">Failed to send email [true]</p>

• Mencoba ( sumber ):

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

rendering:

<p class="#{status ? text-success : text-warning}" id="lblMessage">Failed to send email [true]</p>

Melakukan sesuatu seperti ini tampaknya cukup kontra produktif dan konyol dalam kasus memiliki banyak kelas dan status, dll (di bawah ini yang tidak berfungsi c - kemungkinan besar karena saya melakukan sesuatu yang salah: sumber ).

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

Bagaimana saya bisa menggunakan variabel yang diteruskan dari NodeJS backend untuk menambah / mengubah / menghapus kelas elemen html di template pug?

Answer 1

Menambahkan nama kelas bersyarat dapat dilakukan dengan ini:

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

Untuk menjelaskan perbedaan antara kode di atas dan contoh yang Anda sebutkan :

The classatribut mendapatkan string, pug menggunakan ini sebagai nilai. Jika boolean dikembalikan (atau null), atribut itu sendiri akan dirender atau tidak. Misalnya kotak centang:

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

Setelah beberapa pengujian, lebih banyak membaca / mencari, dll saya menemukan solusi yang berfungsi. Saya tidak merekomendasikan menggunakan solusi saya, saya mempostingnya sebagai 'batu loncatan' tentang bagaimana saya melakukan cam ke solusi berdasarkan pembacaan saya pada saran, forum, dll.

Catatan, saya tidak mengetahui ()sintaks tanda kurung pada saat menemukan solusi

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

Menggunakan WebStorm, saya melihat kemungkinan kesalahan sintaks (namun halaman dikompilasi dengan benar):

Saya menyarankan untuk menggunakan solusi @ kmgt sebagai gantinya