使用烧瓶 wtforms 创建自定义小部件

Question

我正在努力寻找解释如何使用 wtforms 创建自定义小部件的资源。我想显示一个切换按钮列表。到目前为止，我已经能够使用

创建一个复选框列表

SelectMultipleFields:
  class PrecisionForm(FlaskForm):
    phone_number = StringField('Phone number', [validators.Length(min=4, max=25)])
    contact_emails = SelectMultipleField(
        'Contact emails',
        [at_least_one],
        choices=[],
        option_widget=widgets.CheckboxInput(),
        widget=widgets.ListWidget(prefix_label=False)
     )

但现在我想修改我的widget.CheckBoxInput() 自定义小部件，如下所示：

<label class='switch'> <input type='checkbox'><span class='slider round'></span></label>

如果有人能逐步解释如何做到这一点，我将不胜感激。

--更新--

我找到了一种方法来实现我想做的事情，但它看起来很糟糕：

class ToggleButtonWidget(object):
    def __call__(self, field):
        html = '<label class="switch"><input type="checkbox" id={} name={} value={}><span class="slider round"></span></label>'.format(field.id, field.name, field.label.__dict__['text'])
        return HTMLString(html)

尤其是这部分：field.label.__dict__['text'] 我用来设置复选框的值（来自 wtforms 的字段对象没有属性值）。有没有更好的办法？

Answer 1

输入字段的样式应该在前端完成。例如，您会：

class CheckBoxWidget(Form):
    box1 = BooleanField()
    box2 = BooleanField()
    ...


widget = FormField(CheckBoxWidget)

然后在您的 html 文件中，您将有类似的内容：

<div>
    form.widget.label("checkbox-class")
    form.widget("other-checkbox-class")
</div>

包裹在您的表单中。