在没有 JS 框架的客户端渲染元素类名？ (EJS)

Question

Let's say I have an app which shows to the users a list of existing hobbies.
Each hobby has a category, stored in the db.
I want every hobby element to have its background color - dependent on its category.
I want to implement this with appending specific class to each element.
Basic example code:
Server

app.get("/hobbies", (req, res) => {
    const hobbies = Hobby.getAllHobbies();  

    res.render("hobbies", hobbies);
});

Client (EJS)

<% hobbies.forEach(hobby => { %>
    <div class=""><%= hobby.name %></div>
<% }); %>

What is the best way to append to each div a class depending of hobby.category?

I know its easily possible in React, but I don't want to use any framework for now.

Answer 1

If your classname is not the same as the category but is based on it, then you just need to pass a lookup object to your template.

Server

const categories_classnames = {
    lookup: {
       swimming: 'div-swim',
       biking: 'div-bike',
       painting: 'div-paint',
       // ...
    }
};

app.get("/hobbies", (req, res) => {
    const hobbies = Hobby.getAllHobbies();

    // Alternatively, `locals = { ...hobbies, ...categories_classnames }`
    const locals = Object.assign({}, hobbies, categories_classnames);

    res.render("hobbies", locals);
});

Client

<% hobbies.forEach(hobby => { %>
    <div class="<%= lookup[hobby.category] %>"><%= hobby.name %></div>
<% }); %>