基于Node.js+MongoDB+Handlebars如何根据数据库值勾选对应复选框

你当前使用Node.js+MongoDB+Handlebars开发管理员资料编辑页，需要根据数据库存储的角色权限自动勾选匹配的复选框，可任选以下两种方案实现：
注意：需要保证复选框的value属性值和MongoDB中存储的权限值完全一致，否则会出现匹配失败的情况

方案1：Handlebars模板端实现（推荐，无需额外前端JS） #

• 第一步：后端接口传递权限数组
  从MongoDB查询当前管理员的权限字段（一般为字符串数组格式，例如["User Management", "Club Management"]），渲染模板时将数组传递到前端：

  // Node.js 路由代码示例
  app.get('/admin/edit/:id', async (req, res) => {
    // 从MongoDB查询当前管理员数据
    const adminInfo = await AdminModel.findById(req.params.id);
    // 渲染模板时传入权限数组
    res.render('admin-edit', {
      userRoles: adminInfo.role, // adminInfo.role为MongoDB中存储的权限数组字段
      // 其他页面需要的渲染参数
    })
  })
  

• 第二步：注册Handlebars自定义判断助手
  Handlebars默认没有数组包含判断逻辑，需要自定义助手来识别是否要勾选复选框，在你的Express服务Handlebars配置处添加如下代码：

  const hbs = require('express-handlebars');
  app.engine('hbs', hbs.engine({
    // 其他已有配置保留，新增如下助手
    helpers: {
      isChecked: function(roleArr, currentRole) {
        return roleArr.includes(currentRole) ? 'checked' : '';
      }
    }
  }));
  

• 第三步：修改模板复选框代码
  在每个复选框的input标签中添加checked属性的动态判断，修改后的代码如下：

  <div class="form-group">
  <label class="control-label text-bold mr-6" style=" ">User Management
  <input type="checkbox" name="role" value="User Management" class="chk" {{isChecked userRoles "User Management"}} />
  </label>
  <label class="control-label text-bold mr-6" style=" ">Payment Management
  <input type="checkbox" name="role" value="Payment Management" class="chk" {{isChecked userRoles "Payment Management"}} />
  </label>
  <label class="control-label text-bold mr-6" style=" ">Booking Management
  <input type="checkbox" name="role" value="Booking Management" class="chk" {{isChecked userRoles "Booking Management"}} />
  </label>
  <label class="control-label text-bold mr-6" style=" ">Cancellation Management
  <input type="checkbox" name="role" value="Cancellation Management" class="chk" {{isChecked userRoles "Cancellation Management"}} />
  </label>
  <label class="control-label text-bold mr-6" style=" ">Club Management
  <input type="checkbox" name="role" value="Club Management" class="chk" {{isChecked userRoles "Club Management"}} />
  </label>
  <label class="control-label text-bold mr-6" style=" ">Report Management
  <input type="checkbox" name="role" value="Report Management" class="chk" {{isChecked userRoles "Report Management"}} />
  </label>
  <label class="control-label text-bold mr-6" style=" ">Static Pages Management
  <input type="checkbox" name="role" value="Static Pages Management" class="chk" {{isChecked userRoles "Static Pages Management"}} />
  </label>
  </div>
  

方案2：前端JS实现（改造成本更低，无需修改Handlebars配置） #

如果你不想修改模板引擎配置，可以直接用前端JS实现自动勾选，无需修改原有复选框结构：

• 第一步：后端同样按方案1的方式将权限数组userRoles传递到模板
• 第二步：在模板中添加如下JS代码即可：

  <script>
  // 后端把权限数组序列化后渲染到页面
  const userRoles = {{{JSON.stringify(userRoles)}}};
  // 页面加载完成后自动勾选匹配的复选框
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('input[name="role"]').forEach(checkbox => {
      if(userRoles.includes(checkbox.value)) {
        checkbox.checked = true;
      }
    })
  })
  </script>
  

内容的提问来源于stack exchange，提问作者chaitanya jain