Заявления Flask Jinja2 против сценария использования JavaScript

Question

Я создаю свое первое небольшое веб-приложение с использованием инфраструктуры Flask, и я не уверен, какой подход является наилучшей практикой для изменения свойств элементов (ID = '# NRG') на моей странице на основе данных, определенных в коде Pythonна бэкэнде:

Подход Flask / Jinja2:

    {% if nrg_precip_probs[0] <=25 and nrg_precip_probs[1] <= 25 and nrg_precip_probs[2] <=25 %}
    <script>$("#NRG").css("background", "#21CE99");</script>
    {% else %}
    <script>$("#NRG").css("background", "#F45531");</script>
    {% endif %}

или Подход JavaScript:

function change_it() {
            if ({{nrg_precip_probs[0]}} <= 25) {
                $("#NRG").css("background", "#21CE99");
            } else {
                $("#NRG").css("background", "#F45531");
            }

        }
        change_it();

Answer 1

Если страница генерируется один раз и не будет обновляться сама по себе, обрабатывая данные, извлеченные из запроса AJAX, один чистый вариант - выполнить вычисления на стороне сервера, передав логический результат в шаблон.Тогда шаблон может сделать что-то вроде

<div id="#NRG" style="background: {% if low_precip_prob %}#21CE99{% else %}#F45531{% endif %}"> ...

Другой подход, если вы думаете, что в будущем вы можете использовать более одного цвета, - это вычислить имя класса на стороне сервера.Это упрощает шаблон до

<div id="#NRG" class="{{ precip_class }}"> ...

, но добавляет требование исключить наличие соответствующих имен классов в вашей таблице стилей.