在没有JS框架的客户端中渲染元素类名？ （EJS）

Question

假设我有一个应用程序，向用户显示现有爱好列表。
每个爱好都有一个类别，存储在数据库中。
我希望每个爱好元素都有其背景颜色-取决于其类别。
我想通过将特定的类附加到每个元素来实现此功能。
基本示例代码：
服务器

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

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

客户端（EJS）

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

根据hobby.category，向每个div附加一个类的最佳方法是什么？

我知道它在React中很容易实现，但是我现在不想使用任何框架。

Answer 1

如果您的类名与类别不同，但基于它 ，则只需将查找对象传递给模板。

服务器

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

客户

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