Шаблон Django Javascript, передающий переменную python в переменную javascript - PullRequest
Новая
       25

Шаблон Django Javascript, передающий переменную python в переменную javascript

0 голосов
/ 25 июня 2018

Я создал функцию python с именем generate_random_number, которая генерирует случайное число от 1 до 9, сравнивает его с id каждого видео в моей базе данных и возвращает url видео, соответствующего идентификатор, совпадающий со случайным числом. Вот функция: 

from random import randint
from dash_interface.models import Video
from django import template

register = template.Library()


@register.simple_tag
def random_video():
    random_number = randint(1, 9)
    all_videos = Video.objects.all()
    for video in all_videos:
        if video.id == random_number:
           random_url = video.video_url
           return random_url

Я хочу передать random_url в переменную javascript в шаблоне django.

Мой шаблон выглядит так: 

<video id="videoplayer" controls></video>

            <script>
                {% load generate_random_number %}
            // setup the video element and attach it to the Dash player
            function setupVideo() {
              var url = " ";
              var context = new Dash.di.DashContext();
              var player = new MediaPlayer(context);
                              player.startup();
                              player.attachView(document.querySelector("#videoplayer"));
                              player.attachSource(url);
            }
            </script>

            <style>
            video {
              width: 60%;
              height: 40%;
            }
            </style>

Соответствующая переменная url.

Я сделал {% load generate_random_number %}, но я не знаю, смогу ли я заменить кавычки в url на {{ random_url }}.

Ответы [ 3 ]

0 голосов
/ 25 июня 2018

Вы должны хранить пользовательские определения тегов шаблонов в папке templatetags внутри вашего приложения.Убедитесь, что в папке templatetags присутствует __init__.py.Ваша структура папок должна быть похожа на: 

your_django_app/
    __init__.py
    models.py
    templatetags/
        __init__.py
        template_tags.py
    views.py

И содержимое файла template_tags.py должно соответствовать определению тега: 

from random import randint
from dash_interface.models import Video
from django import template

register = template.Library()  

@register.simple_tag
def random_video():
    random_number = randint(1, 9)
    all_videos = Video.objects.all()
    for video in all_videos:
        if video.id == random_number:
           random_url = video.video_url
           return random_url

Примечание: файл templatetags должен содержатьпеременная с именем register.

После этого вы можете загрузить теги шаблона в ваш HTML.Ваш код будет выглядеть так: 

<video id="videoplayer" controls></video>
{% load template_tags %}

            <script>
            // setup the video element and attach it to the Dash player
            function setupVideo() {
              var url = "{% random_video %}";
              var context = new Dash.di.DashContext();
              var player = new MediaPlayer(context);
                              player.startup();
                              player.attachView(document.querySelector("#videoplayer"));
                              player.attachSource(url);
            }
            </script>

            <style>
            video {
              width: 60%;
              height: 40%;
            }
            </style>
0 голосов
/ 03 июля 2018

Так я предпочитаю подключать шаблоны Django и JS.

Вам необходимо импортировать функцию рендеринга:

файл views.py 

from django.shortcuts import render
from random import randint
from dash_interface.models import Video

def random_video(request):
    random_number = randint(1, 9)
    all_videos = Video.objects.all()
    for video in all_videos:
        if video.id == random_number:
           random_url = video.video_url
           context = {
               "random_url": random_url
           }
           return render(request, "app/video.html", context)
        else:
           return render(request, "app/video.html", {})

video.html 

<video id="videoplayer" controls></video>

            <script>
                {% load generate_random_number %}
            // setup the video element and attach it to the Dash player
            function setupVideo() {
              // using the context passed in here.
              var url = {{ random_url|safe }}; 
              var context = new Dash.di.DashContext();
              var player = new MediaPlayer(context);
              player.startup();
              player.attachView(document.querySelector("#videoplayer"));
              player.attachSource(url);
            }
        </script>

        <style>
        video {
          width: 60%;
          height: 40%;
        }
        </style>

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

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

Приветствия и надеюсь, что это поможет!Я пробовал это во многих своих проектах, и это всегда было для меня успехом.

0 голосов
/ 25 июня 2018

Если вы хотите разделить код JavaScript и HTML-код, вы можете сделать что-то вроде: 

<script arg = {{ somevar }} src = "/path/to/script"></script>

и в сценарии: 

var arg = $("script[src='/path/to/script']").attr("arg");

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

...