Использование Jinja со складным элементом Materialize не отображается - PullRequest
Новая
       5

Использование Jinja со складным элементом Materialize не отображается

0 голосов
/ 09 февраля 2019

Я использую Python и jinja, PyMongo для создания простого сайта базы данных рецептов.У меня это связано с моим MongoDB, и содержимое блока Jinja работает нормально, отображая информацию из этой БД.Я хочу использовать разборный элемент Materialize, который, когда я реализую сам по себе, тоже работает нормально.Когда я пытаюсь объединить их и добавить простой цикл for в Jinja, разборный элемент Materialize перестает работать.Где я иду не так? 

{% extends 'base.html' %} {% block content %} {% for recipe in recipes %} {{recipe.recipe_name}} {{recipe.course_name}} {{recipe.course_description}} {{recipe.cooking_time}} {{recipe.preparation_time}} {{recipe.course_ingredients}} {% endfor %}

<ul class="collapsible popout">
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
</ul>

{% endblock %}

Он отображает содержимое блока из штрафа БД, а также складной элемент. См. Рисунок ниже

working code

Как только я заверну разборный элемент в цикл for, он перестанет работать.Содержимое блока вверху все еще отображается, но складное пространство пусто. 

{% extends 'base.html' %} {% block content %} {% for recipe in recipes %} {{recipe.recipe_name}} {{recipe.course_name}} {{recipe.course_description}} {{recipe.cooking_time}} {{recipe.preparation_time}} {{recipe.course_ingredients}} {% endfor %}

<ul class="collapsible popout">
    {% for recipe in recipes %}
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
        <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
    </li>
    {% endfor %}

</ul>

{% endblock %}

enter image description here

Конечно, это не законченный код, как у меня естьТам реализованы какие-либо элементы блока, но я просто хотел это показать.Ниже приведен готовый код и то, что я думал, должно работать.Выходные данные по-прежнему показывают код блока сверху, но без свертываемого элемента. 

{% extends 'base.html' %} {% block content %} {% for recipe in recipes %} {{recipe.recipe_name}} {{recipe.course_name}} 
{{recipe.course_description}} {{recipe.cooking_time}} {{recipe.preparation_time}} {{recipe.course_ingredients}} {% endfor %}


<ul class="collapsible popout">
    {% for recipe in recipes %}
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>{{recipe.recipe_name}} - {{recipe.course_name}}
        </div>
        <div class="collapsible-body">
            <span>{{recipe.course_description}}</span>
        </div>
    </li>
    {% endfor %}


</ul>

{% endblock %}

enter image description here

Я не вижу, где мой код неверен и не показываетвизуализировать материализовать элемент.Если потребуется дополнительная информация, дайте мне знать.

Сценарии 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
...