Я создаю свое первое небольшое веб-приложение с использованием фреймворка 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();
Вы задаете неправильный вопрос. Шаблон Jinja не поддерживается для обработки логики, поэтому оператор if должен выполняться в функции маршрута Flask и передавать атрибут цвета как часть контекста шаблона в шаблон Jinja, чтобы его можно было отобразить, например <div id = "NRG" style = "background: {{ color }}">
Нет ничего хорошего. Используйте css и добавьте соответствующий класс к элементу NRG



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Если страница сгенерирована один раз и не будет обновляться для данных, извлеченных из запроса AJAX, один чистый вариант - выполнить вычисление на стороне сервера, передав логический результат в шаблон. Тогда шаблон мог бы делать что-то вроде
<div id = "#NRG" style = "background: {% if low_precip_prob %}#21CE99{% else %}#F45531{% endif %}"> ...
Другой подход, если вы думаете, что в будущем вы можете использовать более одного цвета, - это вычисление имени класса на стороне сервера. Это упрощает шаблон до
<div id = "#NRG" class = "{{ precip_class }}"> ...
но добавляет требование о том, чтобы имена классов совпадали в вашей таблице стилей.
JavaScript выглядит чище. Там тоже проще обрабатывать логику.