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

Я создаю свое первое небольшое веб-приложение с использованием фреймворка 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();

JavaScript выглядит чище. Там тоже проще обрабатывать логику.

Mangohero1 18.05.2018 06:30

Вы задаете неправильный вопрос. Шаблон Jinja не поддерживается для обработки логики, поэтому оператор if должен выполняться в функции маршрута Flask и передавать атрибут цвета как часть контекста шаблона в шаблон Jinja, чтобы его можно было отобразить, например <div id = "NRG" style = "background: {{ color }}">

hcheung 18.05.2018 06:46

Нет ничего хорошего. Используйте css и добавьте соответствующий класс к элементу NRG

Tishka17 18.05.2018 08:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
614
1

Ответы 1

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

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

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

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

но добавляет требование о том, чтобы имена классов совпадали в вашей таблице стилей.

Другие вопросы по теме