javascript - Flask- WTF with knockout.js , JavaScript 和 Ajax

Question

我需要在 Flask-WTF(表单)中使用 Knockout.js、JavaScript 和 Ajax，所以这里有一些示例代码

<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 不支持内联数据绑定(bind)。我是否需要编写一些高级宏来完成 Knockoutjs 的 MVVM 支持。

Answer 1

在这个电子邮件字段示例中指定数据绑定(bind)如下:

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

引用:Snippet