Actualmente estoy trabajando en una plantilla de django en la que quiero usar una variable de javascript en la condición if. mi codigo es el siguiente
{% 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>Aquí el diccionario que envío desde el lado del servidor puede verse así
{ "tickerList" : ["GOOGL","TSLA"], "GOOGL" : (plotly object), "TSLA" : (plotly object) } Dependiendo del botón en el que el usuario hizo clic, quiero cambiar el gráfico (objeto de trazado) en la pantalla. Como puede ver, hice los botones necesarios y cambio la variable currentTicker , pero no estoy seguro de cómo puedo cambiar el gráfico en tiempo real en la pantalla cuando el usuario hace clic en el botón. ¿Alguien podría ayudar con esto?
Django y JavaScript se evalúan en diferentes tiempos de ejecución: su plantilla de Django se evalúa en el lado del servidor una vez que llega la solicitud, mientras que su código JavaScript se evalúa en el lado del cliente después de que el navegador lo haya recibido. Por lo tanto, el motor de plantillas de Django no puede leer las variables de JavaScript.
Según tengo entendido, le gustaría actualizar la información en el ticker actualmente seleccionado en su HTML DOM. Para conseguirlo, existen dos posibles soluciones:
Puede enviar el ticker seleccionado a su servidor como parámetro de consulta:
{% for t in tickerList %} <a class="btn btn-dark" href="?currentTicker={{ t }}">{{ t }}</a> {% endfor %}y leerlo allí:
request.GET.get("currentTicker")O puede cambiarlo solo del lado del cliente. Para esto, cambia las líneas.
{% if {{ currentTicker }} %} {{ currentTicker |safe }} {% else %} <p>NO Graph</p> {% endif %}a
<p id="currentTicker">NO Graph</p>y agrega esto en tu código JavaScript:
function changeChart(ticker) { document.getElementById("currentTicker").innerText = ticker || 'NO Graph'; }Con el primer enfoque, puede hacer su negocio solo en Python, volviendo a renderizar la página con cada cambio de selección de ticker. Esto es útil para cualquier cálculo intensivo en computación, etc.
El segundo enfoque proporciona retroalimentación instantánea para el usuario, mientras que para cálculos más grandes aumenta la carga en el lado del cliente.
Al final, para su caso de uso, su decisión puede depender de su preferencia personal con el idioma con el que se sienta más cómodo.