Question

我尝试使用Jinja2模板为SQLAlchemy应用创建基于WTForms的简单管理界面。

我已经阅读了docs of WTForms-Alchemy，我了解它可以通过几行代码从我的模型中自动生成表单，例如：

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TextInput,
} = React;

var MyModule = React.createClass({
  render: function() {
    return <View style={styles.container}>

      <View style={styles.headline}>
        <Text>Hello World</Text>
      </View>

      <View style={styles.inputsContainer}>

        <TextInput style={[styles.input]} placeholder="Email" />
        <TextInput secureTextEntry={true} style={[styles.input]} placeholder="Password" />
        <TouchableHighlight style={styles.fullWidthButton} onPress={this.buttonPressed}>
          <Text style={styles.fullWidthButtonText}>Submit</Text>
        </TouchableHighlight>

      </View>
    </View>
  },
  buttonPressed: function() {
    console.log('button was pressed!');
  }
});

var paddingLeft = 15;


var styles = StyleSheet.create({
  inputsContainer: {
    flex: 1
  },
  fullWidthButton: {
    backgroundColor: 'blue',
    height:70,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  fullWidthButtonText: {
    fontSize:24,
    color: 'white'
  },
  input: {
    paddingLeft: paddingLeft,
    height: 40,
    borderColor: 'black',
    backgroundColor: 'white',
  },
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
    alignItems: 'stretch',
  },
  headline: {
  }
});



AppRegistry.registerComponent('MyModule', () => MyModule);

我的问题是，即使我自动生成了这个表单，我也没有找到任何关于如何将其变成功能性HTML页面的资源。有一些关于字段渲染错误的片段，以及一些SO答案提到用于渲染整个字段的宏，但我发现绝对没有关于如何自动生成完整的功能表单的资源。

//我知道这是Flask-Admin可能已经做过的事情，我没有使用Flask，所以不幸的是这不可能。

Answer 1

WTForms让您了解在将表单传递到模板后如何渲染表单。渲染表单的最简单方法是遍历表单并渲染字段。调用字段（或其标签）时，它会发出HTML。

<form action="/some_url" method="POST">
   {% for field in form %}
       {{ field.label() }}
       {{ field() }}
   {% endfor %}

   <button type="submit" />
</form>

宏provided here提供了一种生成围绕这些字段的HTML的自动方式。

Answer 2

您可以像这样使用wtf.quick_form，在这种情况下，您将拥有一个完全通用的表单模板。使用info{}属性标记您的db.Model成员以设置字段显示名称等

<form method="post" action="/{{route}}">
  <fieldset>
    {{ wtf.quick_form(form, button_map={'submit':'success'}) }}
    <input class="btn btn-success" type="submit" value="Submit" />  
    <button type="button" class="btn"><a href="/">Cancel</a></button>
  </fieldset>
</form>

您的表单定义：

class MyobjectForm(BaseModelForm):
    class Meta:
        model = Myobject

然后您的路由处理程序如下所示：

@app.route('/myobject', methods=('GET', 'POST'))
def myobject_route():
    obj = Myobject()
    form = MyobjectForm(obj = obj)
    if form.validate_on_submit():
        form.populate_obj(obj)
        db.session.add(obj)
        db.session.commit()
        return redirect(url_for('index'))
    return render_template('form.j2', form=form, title='My Object', route='myobject')

如何从WTForms表单自动生成完整的HTML

2 个答案: