Question

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

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

并收到此错误：

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

为什么我会收到此错误，如何解决？

Answer 1

您需要使用有效的Python名称作为变量名称。因此，像＆＃34;数据切换＆＃34;等名称是无效的，因为他们有一个＆＃34; - ＆＃34;在他们中。更改名称以使用下划线，例如＆＃34; data_toggle＆＃34;。 WTForms会自动转换＆＃34; _＆＃34;到＆＃34; - ＆＃34;对于它无法识别的关键字。

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

您还可以使用dict解包来传递关键字参数，其中的键不是有效变量。

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

您可以使用render_kw设置字段的默认属性，而不是在渲染时设置属性。

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

Answer 2

创建表单时，在字段定义中添加任何data- *字段作为render_kw字典。在此示例中，使用Knockout如下所示：

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

    submit = SubmitField('Submit')

Answer 3

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

但是，davidism的解决方案对我不起作用，WTFForm并未将“ _”转换为“-”。

也许我的WTFForms版本太旧（Flask-WTF == 0.8.2 WTForms == 1.0.2）。

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

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */

    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = '/home';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }
}

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

在WTForms字段上设置数据属性

3 个答案: