Flask- WTF with knockout.js , JavaScript and Ajax

Flask- WTF with knockout.js , JavaScript and Ajax

本文关键字：JavaScript and Ajax js WTF with knockout Flask-      更新时间：2023-09-26

我需要使用 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 支持？

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

{

{ form.email（required=true， **{'data-bind'：'value： email'}） }}

参考：代码段

相关文章：