Как использовать переменную Javascript в условии if в шаблоне Django?

В настоящее время я работаю над шаблоном django, в котором я хочу использовать переменную javascript в условии if. Мой код выглядит следующим образом

{% extends 'base.html' %}
{% block content %}

    <br>
    <div class="buttonRow">
        {% for t in tickerList %}
            <button class="btn btn-dark" onclick="changeChart(this.value)" value="{{ t }}">{{ t }}</button>
        {% endfor %}

    </div>
    <br><br>
    {% if {{ currentTicker }} %}
        {{ currentTicker |safe }}
    {% else %}
        <p>NO Graph</p>
    {% endif %}
{% endblock %}

<style>
    .buttonRow {
        width: 100%;
        float: left;
        border: solid 1px blue;
        text-align: center;
    }

    button {
        background: black;
        color: white;
    }
</style>

<script>


    var currentTicker = {{ tickerList.0 }}
        function changeChart(ticker) {
            currentTicker = ticker;
        }
</script>

Здесь словарь, который я отправляю с серверной стороны, может выглядеть следующим образом

{
  "tickerList" : ["GOOGL","TSLA"],
  "GOOGL" : (plotly object),
  "TSLA" : (plotly Object)

}

В зависимости от нажатия пользователем кнопки я хочу менять график (объект plotly) на экране. Как вы можете видеть, я сделал необходимые кнопки и изменил переменную ``currentTicker'', но я не уверен, как я могу изменить график в реальном времени на экране, когда пользователь нажимает на кнопку. Может ли кто-нибудь помочь с этим?

Django и JavaScript оцениваются в разное время выполнения: Ваш шаблон Django оценивается на стороне сервера, как только приходит запрос, в то время как ваш код JavaScript оценивается на стороне клиента после того, как он был получен браузером. Поэтому переменные JavaScript не могут быть прочитаны вашим шаблонизатором Django.

Насколько я понимаю, вы хотите обновить информацию о текущем выбранном тикере в вашем HTML DOM. Чтобы достичь этого, есть два возможных решения:

  1. Вы можете отправить выбранный тикер на ваш сервер в качестве параметра запроса:

    {% for t in tickerList %}
    <a class="btn btn-dark" href="?currentTicker={{ t }}">{{ t }}</a>
{% endfor %}

    и прочитать его там:

    request.GET.get("currentTicker")

  2. Или вы можете изменить его только на стороне клиента. Для этого измените строки

    {% if {{ currentTicker }} %}
    {{ currentTicker |safe }}
{% else %}
    <p>NO Graph</p>
{% endif %}

    на 

    <p id="currentTicker">NO Graph</p>

    и добавьте это в ваш JavaScript код:

    function changeChart(ticker) {
    document.getElementById("currentTicker").innerText = ticker || 'NO Graph';
}

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

Второй подход обеспечивает мгновенную обратную связь для пользователя, но при больших вычислениях увеличивает нагрузку на сторону клиента.

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

Вернуться на верх