Создание "ListField", которое динамически расширяется с помощью кнопки "добавить новый элемент", Django

Возможно, этот вопрос следует разделить на два вопроса, но поскольку решение HTML (может) зависеть от модели (и наоборот), я помещаю его в один вопрос.

У меня есть модель для рецептов:

from django.db import models

class Recipe(models.Model):
    title = models.CharField("Title", max_length = 64, primary_key=True)
    what_to_do = models.TextField("What to do")
    n_persons = models.IntegerField(default = 2)

Я хочу добавить способ хранения ingredients для рецепта. Моя первая мысль была хранить их в списке dict, используя JSONField, например [{"what":"egg","units":"pcs","N":2},{"what":"flour", "units":"gram", "N":200}].

Затем я перебираю все ингредиенты в шаблоне и составляю список, как

    <div class = "container">
        {% for ing in recipe.ingredients %}
        <li> 
            {{ing.what}} -  {{ing.N}} {{ing.units}} 
        </li>
        {% endfor %}
    </div>

который работает нормально.

Вопрос в том, как сделать удобный для пользователя способ добавления нового ингредиента в рецепт?

Оптимально в моем шаблоне я бы имел 3 колонки с полями типа

"what"     "how much?"    " units
-------+----------------+-------

======        ======        ======
     |       |      |      |      |
======        ======        ======

где пользователь может написать то, что он хочет. Но пользователь должен иметь возможность добавить новую строку, если он хочет добавить больше ингредиентов.

Моя другая мысль заключалась в том, чтобы иметь "что", "N" и "единицы" каждый как JSONField в модели, что может сделать вышеупомянутое более легким, хотя это не решает проблему динамической пары ингредиентов.

Вернуться на верх