Работа с WTForms FieldList

Question

Я использую WTForms с Flask через расширение Flask.WTF. Этот вопрос не относится к колбе.

WTForms включает в себя поле FieldList для списков полей . Я хотел бы использовать это для создания формы, где пользователи могут добавлять или удалять элементы. Это потребует какой-то Ajax-инфраструктуры для динамического добавления виджетов, но в документации WTForms об этом ничего не говорится.

Другие фреймворки, такие как Deform, поставляются с поддержкой Ajax . Есть ли подобный фреймворк для WTForms?

Answer 1

Я использовал что-то подобное с моим FieldList / FormField, чтобы разрешить добавлять больше записей:

$(document).ready(function () {
    $('#add_another_button').click(function () {
        clone_field_list('fieldset:last');
    });
});

function clone_field_list(selector) {
    var new_element = $(selector).clone(true);
    var elem_id = new_element.find(':input')[0].id;
    var elem_num = parseInt(elem_id.replace(/.*-(\d{1,4})-.*/m, '$1')) + 1;
    new_element.find(':input').each(function() {
        var id = $(this).attr('id').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-');
        $(this).attr({'name': id, 'id': id}).val('').removeAttr('checked');
    });
    new_element.find('label').each(function() {
        var new_for = $(this).attr('for').replace('-' + (elem_num - 1) + '-', '-' + elem_num + '-');
        $(this).attr('for', new_for);
    });
    $(selector).after(new_element);
}

Удалить кнопки было бы намного сложнее.

(Код в основном заимствован из ответа на Динамическое добавление формы в набор форм Django с помощью Ajax .)

Answer 2

Из вашего описания я не понимаю, почему Ajax особенно необходим, хотя, конечно, вам нужна логика JavaScript для добавления / удаления строк. Я реализовал эту функциональность, используя WTForms, но без специальной поддержки самой WTForms; вам просто нужно убедиться, что при создании клиентских виджетов вы делаете это, используя имена полей, которые WTForms будет правильно анализировать в списке на стороне сервера. Вы можете клонировать существующую строку, используя JavaScript-код на стороне клиента, чтобы добавить строки, чтобы рендеринг строки был одинаковым для всех строк, созданных на стороне сервера, и строк, созданных на стороне клиента.