我的模型目前有三个相关对象(还有更多,但只有三个与此问题相关)。用户,网络和电子邮件。我希望能够做的是拥有一组定义的网络,并允许每个用户在每个网络上都有一个电子邮件地址(这些稍微复杂一点,但我已将其缩减为我认为相关的)
class User(UserMixin, db.Model):
"""
The User object.
"""
__tablename__ = 'users'
id = db.Column(db.Integer, primary_key=True)
# email = db.Column(db.String(64), unique=True, index=True)
username = db.Column(db.String(64), unique=True, index=True)
password_hash = db.Column(db.String(128))
firstname = db.Column(db.String(64))
lastname = db.Column(db.String(64), unique=False, index=True)
email = db.relationship('Email', backref='user')
class Network(db.Model):
__tablename__ = 'networks'
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(64), index=True)
emails = db.relationship('Email', backref='network', lazy='dynamic')
class Email(db.Model):
__tablename__ = 'emails'
id = db.Column(db.Integer, primary_key=True)
network_id = db.Column(db.Integer, db.ForeignKey('networks.id'))
user_id = db.Column(db.Integer, db.ForeignKey('users.id'))
address = db.Column(db.String(64))
我的观点:
@main.route('/edit-profile', methods=['GET', 'POST'])
@login_required
def edit_profile():
form = EditProfileForm(obj=current_user)
form.email.min_entries=Network.query.count()
if form.validate_on_submit():
form.populate_obj(current_user)
db.session.add(current_user)
db.session.commit()
flash("Your profile has been updated.")
return redirect(url_for('.user', username=current_user.username))
return render_template('edit_profile.html', form=form)
表格:
class EmailForm(Form):
id = HiddenField('Id')
address = StringField('Address', validators=[DataRequired(), Email()])
network = QuerySelectField(query_factory=get_networks)
class EditProfileForm(Form):
username = StringField('Username', validators=[Length(0, 64),
Regexp('[A-Za-z0-9_\.\-]'),
DataRequired()])
firstname = StringField('First name', validators=[Length(0, 64),
DataRequired()])
lastname = StringField('Last name', validators=[Length(0, 64),
DataRequired()])
email = ModelFieldList(FormField(EmailForm), model=Email)
submit = SubmitField('Submit')
外部表单的HTML:
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Edit Profile{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Edit Your Profile</h1>
</div>
<div class="col-md-8">
{{ wtf.quick_form(form) }}
</div>
{% endblock %}
以下是Chrome和Firefox中的内容:
所以我显然做错了,因为:
我哪里出错了?我尝试不使用wtf.quick_form(),但也无法手动查看。为此,我将{{wtf.quick_form()}}替换为:
<label>{{ form.username.label }}</label>
{{ form.username }}
<label>{{ form.firstname.label }}</label>
{{ form.firstname }}
<label>{{ form.lastname.label }}</label>
{{ form.lastname }}
<div data-toggle="fieldset" id="email-fieldset">
{{ form.email.label }}
<table class="ui table">
<thead>
<th>Network</th>
<th>Address</th>
<th>
{{ form_button(url_for('main.add_email'),
icon ('plus')) }}
</th>
</thead>
<tbody>
{% for e in form.email %}
<tr data-toggle="fieldset-entry">
<td>{{ e.network }}</td>
<td>{{ e.address }}</td>
<td>
{{ form_button(url_for('main.remove_email',
id=loop.index), icon ('remove')) }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{{ form.submit }}
当我渲染它时,它在我的浏览器中显示如下:
这具有一致性的优点,但不是我想要使用flask-bootstrap获得的外观。我正在努力弄清楚哪种方法能让我更轻松地走到哪里。
将表单html更改为this给了我拍摄的UI元素。关键是要理解“class_”可以传入,并在输出html中呈现为“class”。
<div class="form-group required"><label class="control-label">{{ form.username.label }}</label>
{{ form.username(class_='form-control') }}</div>
<div class="form-group required"><label class="control-label">{{ form.firstname.label }}</label>
{{ form.firstname(class_='form-control') }}</div>
<div class="form-group required"><label class="control-label">{{ form.lastname.label }}</label>
{{ form.lastname(class_='form-control') }}</div>
<div data-toggle="fieldset" id="email-fieldset" class="form-group">
{{ form.email.label }}
<table class="ui table">
<thead>
<th>Network</th>
<th>Address</th>
<th>
{{ form_button(url_for('main.add_email'),
icon ('plus')) }}
</th>
</thead>
<tbody>
{% for e in form.email %}
<tr data-toggle="fieldset-entry">
<td>{{ e.network(class_='form-control') }}</td>
<td>{{ e.address(class_='form-control') }}</td>
<td>
{{ form_button(url_for('main.remove_email',
id=loop.index), icon ('remove')) }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
产生这个:
答案 0 :(得分:2)
答案是简单地将“class_”传递给.html表单中的每个字段构造函数。