2

我需要将 Knockout.js 、 JavaScript 和 Ajax 与 Flask-WTF（表单）一起使用，所以这里有一些示例代码

<form action="{{ url_for('post_it') }}" class="navbar-form form-inline" method="post" id="new_postform">
    {{ form.csrf_token }}
        <fieldset>
          {{ form.hidden_tag() }}

{% from "macro/_formhelpers.html" import render_field %}

            <div class="control-group">
                  <div class="controls">
                        {{ render_field(form.poster, class="form-control", size="5", placeholder="Post Anything" ) }}

                    </div>
            </div>

现在我正在编写一个在页面底部剪断的 JavaScript

{% block tail_script %}
<script src="{{ url_for('static', filename='bootstrap/js/jquery.validate.js') }}"></script>
<script src="{{ url_for('static', filename='bootstrap/js/additional-methods.js') }}"></script>
<script type="text/javascript">
$(document).ready(function () {

$('#new_postform').validate({
    rules: {
        form.poster: {
            minlength: 2,
            required: true
        }
    },
    highlight: function (element) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    success: function (element) {
        element.text('OK!').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
    }
});
});
</script>

现在在这里我采用名为“new_postform”的表单ID，但在Knockoutjs中，我需要在data-bind =“text：name”类型的片段下编写内联代码，我需要在其中写入

{{ render_field(form.poster,data-bind="text: name", class="form-control", size="5", placeholder="Post Anything" ) }}

但这给了我模板错误，Flask-WTF 不支持数据绑定内联。我是否需要编写一些高级宏来完成 Knockoutjs 的 MVVM 支持。

4

1 回答 1

1

在此电子邮件字段示例中指定数据绑定，如下所示：

{{ form.email(required=true, **{'data-bind':'value: email'}) }}

参考：片段

于 2017-03-11T02:28:47.823 回答