Choices.js 自定义模板中 classNames 参数的正确使用方式

问题背景

在使用 Choices.js 这个强大的 JavaScript 选择框库时，开发者经常需要通过 callbackOnCreateTemplates 回调函数来自定义下拉选项的渲染模板。然而，在自定义 choice 模板时，许多开发者会遇到 classNames 参数未定义的问题，这会导致样式无法正确应用。

问题现象

开发者尝试在 callbackOnCreateTemplates 中自定义 choice 模板时，发现直接使用 classNames 参数会导致所有类名属性为 undefined。而当将参数改为解构形式 {classNames} 时，问题得到解决。

技术分析

参数传递机制

Choices.js 在调用 callbackOnCreateTemplates 中的各个模板函数时，对于不同模板类型的参数传递方式有所不同：

1. item 模板：直接传递两个参数 (classNames, data)
2. choice 模板：传递一个包含多个属性的对象，需要使用解构语法 ({classNames}, data)

这种不一致性源于 Choices.js 内部实现的历史原因，虽然不够统一，但了解这一差异能帮助开发者正确使用。

正确的参数解构方式

对于 choice 模板，正确的参数接收方式应该是：

choice: ({classNames}, data) => {
  // 模板逻辑
}

这种解构赋值的方式能够正确地从第一个参数对象中提取出 classNames 属性。

解决方案

1. 统一使用解构语法

为了避免混淆，建议在所有模板函数中都使用解构语法：

callbackOnCreateTemplates: {
  item: ({classNames}, data) => { /* ... */ },
  choice: ({classNames}, data) => { /* ... */ }
}

2. 类名使用的最佳实践

Choices.js 提供的 classNames 对象包含以下常用类名：

• item: 基础项样式
• itemChoice: 选择项特有样式
• itemDisabled: 禁用状态样式
• itemSelectable: 可选状态样式
• highlightedState: 高亮状态样式

在模板中合理组合这些类名可以确保样式与库的默认行为保持一致。

3. 自定义模板示例

结合正确的参数解构和类名使用，一个完整的自定义模板示例如下：

callbackOnCreateTemplates: {
  choice: ({classNames}, data) => {
    return `
      <div class="${classNames.item} ${classNames.itemChoice} ${
        data.disabled ? classNames.itemDisabled : classNames.itemSelectable
      }" data-choice data-id="${data.id}" data-value="${data.value}">
        <span style="background-color:${data?.customProperties?.color};"></span>
        ${data.label}
      </div>
    `;
  },
  item: ({classNames}, data) => {
    return `
      <div class="${classNames.item} ${
        data.highlighted ? classNames.highlightedState : classNames.itemSelectable
      }" data-item data-id="${data.id}" data-value="${data.value}">
        <span style="background-color:${data?.customProperties?.color};"></span>
        ${data.label}
      </div>
    `;
  }
}

总结

Choices.js 中不同模板函数的参数传递方式存在差异，特别是在处理 classNames 时。通过使用解构语法和了解库的内部实现机制，开发者可以避免类名未定义的问题，创建出既美观又功能完善的自定义选择框组件。记住这一细微差别，将大大提高使用 Choices.js 进行开发的效率。