javascript - Flask - knockout.js、JavaScript、および Ajax を使用した WTF

Question

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 サポートを実現するには、いくつかの高度なマクロを作成する必要がありますか?