在 WTForms 字段上设置数据属性答案

【问题标题】：Setting data attributes on a WTForms field在 WTForms 字段上设置数据属性
【发布时间】：2015-03-02 23:03:50
【问题描述】：

我想将“data-”属性添加到表单字段以与 Bootstrap 集成。我在模板中尝试了以下内容：

{{ form.test(data-toggle="toggle", data-size="mini", data-on="Yes", data-off="No", type="checkbox")}}

得到了这个错误：

TemplateSyntaxError: expected token ',', got '='

为什么会出现此错误，如何解决？

【问题讨论】：

标签： python flask jinja2 wtforms

【解决方案1】：

您需要使用有效的 Python 名称作为变量名称。因此，像“data-toggle”这样的名称是无效的，因为它们中有一个“-”。更改名称以使用下划线，例如“data_toggle”。对于无法识别的关键字，WTForms 会自动将“_”转换为“-”。

{{ form.test(data_size="mini") }}

您还可以使用 dict 解包来传递带有无效变量键的关键字参数。

{{ form.name(**{"data-size": "mini"}) }}

渲染时不设置属性，可以为render_kw的字段设置默认属性。

class ExampleForm(Form):
    name = StringField(render_kw={"data-size": "mini"})

【讨论】：

【解决方案2】：

正如大卫主义所解释的那样，“数据切换”之类的名称是无效的。

但是，davidism 的解决方案对我不起作用，WTFForm 没有将 '_' 转换为 '-'。

可能我的 WTFForms 版本太旧了（Flask-WTF==0.8.2 WTForms==1.0.2）。

或者，您可以将包含无效语法的 HTML 属性作为临时字典传递。

{{ form.test(type="checkbox", **{'data-toggle':'toggle', 'data-size'='mini', data-on="Yes"} )}}

参考：http://flask.pocoo.org/snippets/107/

【讨论】：

【解决方案3】：

创建表单时，将任何 data-* 字段添加为字段定义中的 render_kw 字典。本例使用Knockout如下：

class ScheduledReportForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()], render_kw={'data-bind':'value: name'})

    submit = SubmitField('Submit')

【讨论】：