Praca z WTForms FieldList

Question

Używam WTForms z Flask przez rozszerzenie Flask.WTF. To pytanie nie jest jednak specyficzne dla Flask.

WTForms zawiera FieldList field for lists of fields. Chciałbym użyć tego, aby utworzyć formularz, w którym użytkownicy mogą dodawać lub usuwać elementy. Będzie to wymagało pewnego rodzaju struktury Ajax do dynamicznego dodawania widżetów, ale dokumentacja WTForms nie wspomina o tym.

Inne środowiska, takie jak Deform come with Ajax support. Czy dostępne są podobne ramy dla WTForms?

Answer 1

Kiedyś coś takiego z moim FieldList/FormField aby umożliwić dodawanie kolejnych wpisów:

$(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); 
} 

Usuń przyciski byłoby znacznie trudniejsze.

(Kod większości zapożyczone od odpowiedzi na Dynamically adding a form to a Django formset with Ajax.)

Answer 2

Z twojego opisu nie rozumiem, dlaczego Ajax jest szczególnie potrzebny, chociaż oczywiście potrzebujesz logiki JavaScript do dodawania/usuwania wierszy. Zaimplementowałem tę funkcjonalność za pomocą WTForms, ale bez specjalnej obsługi samego WTForms; musisz tylko upewnić się, że podczas tworzenia widżetów po stronie klienta, robisz to za pomocą nazw pól, które WTForms będą poprawnie analizować na liście po stronie serwera. Klonowanie istniejącego wiersza za pomocą skryptu JavaScript po stronie klienta w celu dodania wierszy, dzięki czemu renderowanie wiersza jest spójne dla wszystkich wierszy wygenerowanych po stronie serwera i wierszy utworzonych po stronie klienta.