[Flask] quick_form与render_kw的class属性并存

说明
  • quick_form:bootstrap/wtf.html里定义的宏,来自Flask-Bootstrap拓展。
正文

  wtforms字段的构造函数有一个render_kw参数,可以控制渲染内容的属性:

# 在input标签里,添加属性id=submit_by_kw
wtforms.SubmitField('提交', render_kw={'id': 'submit_by_kw'})

使用wtf.quick_form渲染后

<input class="btn btn-default" id="submit_by_kw" name="submit" type="submit" value="提交">

  从渲染的结果可以看到,quick_form默认情况下会给按钮添加class属性。若在使用quick_form的同时,也在render_kw里设置class属性,最终仅保留quick_form的设置。原因如下:

def render_field(self, field, render_kw):
    """
    render_field allows customization of how widget rendering is done.

    The default implementation calls ``field.widget(field, **render_kw)``
    """
    other_kw = getattr(field, 'render_kw', None)
    if other_kw is not None:
        render_kw = dict(other_kw, **render_kw)
    return field.widget(field, **render_kw)

  这是Flask-WTF渲染字段的源码,从中可以看出other_kw是创建Field对象是传入的render_kw参数,而这里的render_kw是从外面(也就是quick_form)传入的参数。渲染前会将二者合并(render_kw = dict(other_kw, **render_kw))。而合并的结果就是,第二个参数(**render_kw)的值被最终保留。

  想要同时保留双方的class值,可以重写render_field方法。

class RenderForm(FlaskForm):
    class Meta(FlaskForm.Meta):
        """
        重写render_field,实现Flask-Bootstrap与render_kw的class并存
        """
        def render_field(self, field, render_kw):
            other_kw = getattr(field, 'render_kw', None)
            if other_kw is not None:
                class1 = other_kw.get('class', None)
                class2 = render_kw.get('class', None)
                if class1 and class2:
                    render_kw['class'] = class2 + ' ' + class1
                render_kw = dict(other_kw, **render_kw)
            return field.widget(field, **render_kw)

  表单类继承自RenderForm后,里面定义的全部Field都可以实现class并存了。

class CustomForm(RenderForm):
    submit = Fields.SubmitField('提交', render_kw={'class': 'pull-right'})

  如果仅有个别Field需要class并存,可以在创建Field对象是指定_meta参数:

class CustomForm(FlaskForm):
    submit = Fields.SubmitField('提交', render_kw={'class': 'pull-right'}, _meta=RenderForm.Meta())
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容