自定义CheckboxSelectMultiple组件模板时，能否传入关联对象的其他属性？

Django 默认的多选复选框组件，生成单个选项的上下文时只会传入value、label、选中状态这些基础字段，我们只需要重写组件的选项生成方法，把关联的Addon模型的额外字段注入到选项的上下文中，就能在自定义模板里直接调用了。

1. 改造自定义复选框组件 #

你已经搭好了基础的CustomCheckbox框架，只需要补充两个方法即可完成额外字段的注入：

• 重写get_context方法，提前构建Addon主键到实例的映射表，避免循环查库
• 重写create_option方法，把Addon的描述、价格、图片等字段注入到每个选项的上下文里

改造后的完整组件代码如下：

class CustomCheckbox(forms.CheckboxSelectMultiple):
    template_name = 'bookings/forms/checkbox_select.html'
    option_template_name = 'bookings/forms/checkbox_option.html'

    def get_context(self, name, value, attrs):
        # 调用父类方法拿到默认上下文，同时获取当前字段关联的Addon查询集
        context = super().get_context(name, value, attrs)
        # 构建 主键 -> Addon实例 的映射，避免后续循环查库
        self.addon_map = {str(addon.pk): addon for addon in self.choices.queryset}
        return context

    def create_option(self, name, value, label, selected, index, subindex=None, attrs=None):
        # 先拿到父类生成的默认选项上下文
        option = super().create_option(name, value, label, selected, index, subindex=subindex, attrs=attrs)
        # 从映射表里取当前选项对应的Addon实例
        addon = self.addon_map.get(str(value))
        if addon:
            # 把需要的额外字段全部注入选项上下文
            option['description'] = addon.description
            option['price'] = addon.price
            # 图片优先级：缩略图 > 本地上传图 > 远程URL
            if addon.image_thumb:
                option['image'] = addon.image_thumb.url
            elif addon.image:
                option['image'] = addon.image.url
            else:
                option['image'] = addon.image_url
        return option

2. 在自定义选项模板中调用注入的变量 #

现在你的checkbox_option.html模板里，除了默认的option.name、option.label、option.value、option.selected这些内置变量，还可以直接使用我们注入的自定义字段，示例模板写法：

<div class="custom-checkbox-item">
    <input type="checkbox" 
           name="{{ option.name }}" 
           value="{{ option.value }}" 
           {% if option.selected %}checked{% endif %}>
    <img src="{{ option.image }}" alt="{{ option.label }}" class="addon-thumb">
    <div class="addon-info">
        <div class="addon-name">{{ option.label }}</div>
        <div class="addon-desc">{{ option.description }}</div>
        <div class="addon-price">¥{{ option.price }}</div>
    </div>
</div>

注意事项 #

• 如果你的trip_addons字段是自定义的choices（不是默认关联Addon的查询集），只需要在CustomCheckbox的__init__方法里接收额外传入的字段映射字典，替换掉get_context里的映射表构建逻辑即可，组件适配性很强
• 如果Addon的图片字段为空，模板里最好加个默认图兜底，避免出现裂图
• 提前构建主键到实例的映射表是为了避免每个选项都单独触发一次数据库查询，能显著提升大列表下的页面加载性能

这个写法适配Django 2.0及以上的所有主流版本，如果使用的是Django 1.x的老版本，可以通过重写render_options方法实现相同的逻辑。

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