在没有 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>
<% }); %>