javascript - Flask Jinja2语句与JavaScript用例

我正在使用Flask框架创建我的第一个小型Web应用程序，但我不确定哪种方法是基于后端Python代码中定义的数据更改页面上元素（ID ='＃NRG'）元素属性的最佳实践。 ：

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();

最佳答案

如果页面仅生成一次，并且不会对从AJAX请求中获取的数据进行刷新，那么一个干净的选择是在服务器端进行计算，将布尔结果传递给模板。然后，模板可以执行以下操作

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

如果您认为将来可能会使用多种颜色，则另一种方法是计算服务器端的类名。这将模板简化为

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

但增加了在样式表中具有匹配的类名的要求。