Flask Jinja2 Statements vs. JavaScript Use Case

Question

I am creating my first small web app using the Flask framework and I am not sure which approach is best practice to change the properties of elements (ID='#NRG') on my page based upon data defined in the Python code on the backend:

Flask / Jinja2 Approach:

    {% 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 %}

or a JavaScript Approach:

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

        }
        change_it();

JavaScript looks cleaner. Easier to handle logic there, too. — Mangohero1
– Mangohero1, Commented May 18, 2018 at 4:30
You are asking the wrong question. The Jinja template is not supported to handle the logic, therefore the if statement should be done at the Flask route function and pass in the color attribute as part of the template context to the Jinja template so that it can be rendered, e.g. <div id="NRG" style="background: {{ color }}"> — hcheung
– hcheung, Commented May 18, 2018 at 4:46
None is good. Use css and add sorresponding class to the NRG element — Tishka17
– Tishka17, Commented May 18, 2018 at 6:10

Dave W. Smith · Accepted Answer · 2018-05-18 05:00:34Z

1

If the page is generate once and won't be refreshing itself doing to data fetched from an AJAX request, one clean option is to do the calculation server-side, passing the boolean result to the template. Then, the template could do something like

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

Another approach, if you think you might be using more than one color in the future, is to calculate a class name server-side. This simplifies the template to

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

but adds the requirement off having matching class names in your style sheet.

answered May 18, 2018 at 5:00

Dave W. Smith

25k4 gold badges42 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Flask Jinja2 Statements vs. JavaScript Use Case

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related