Django模板Javascript将python变量传递给javascript答案

【问题标题】：Django template Javascript passing a python variable to a javascript oneDjango模板Javascript将python变量传递给javascript
【发布时间】：2018-12-03 20:07:07
【问题描述】：

我确实创建了一个名为 generate_random_number 的 python 函数，它生成一个介于 1 和 9 之间的随机数，并将其与数据库中每个视频的 id 进行比较，并返回对应于视频的 url id 匹配随机数。这是函数：

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 传递给django 模板中的javascript 变量。

我的模板如下所示：

<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 }}。

【问题讨论】：

是的，你可以做到。 "{{ random_url }}" 将为返回的 url 创建一个字符串表示法，该字符串可以存储在任何 JS 变量中。
我做到了，但我没有播放任何视频
尝试检查您的 HTML 并调试您的 JS 并确保 "{{ random_url }}" 是否返回了某些内容。
你在哪里调用generate_random_number标签？为什么你认为你的模板中有一个叫做random_url的东西？
在模板中必须指定var url = "{{ random_video }}"，可以在定义url后使用console.log(url);或alert(url)查看。

标签： javascript python django python-2.7 django-templates

【解决方案1】：

如果你想拆分 javascript 代码和 html 代码，你可以这样：

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

在脚本中：

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

如果您需要每个具体时期更新 arg，您需要制作一个 ajax。如果你使用数据库来持久化 arg，你可以使用 Django Channels 作为一个更优雅的解决方案。

【讨论】：

【解决方案2】：

您应该将自定义模板标签定义保存在应用内的templatetags 文件夹中。确保__init__.py 存在于templatetags 文件夹中。您的文件夹结构应类似于：

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>

【讨论】：

我确实在我的应用程序中创建了一个名为 templatetags 的目录，我在其中添加了 generate_random_number 和一个空的 init.py 我将尝试进行其他更改，看看它是否有效
不，我很确定它是函数的名称。您可以通过在var url = "{% random_video %}"; 行后添加alert(url); 来检查模板标签是否有效。如果它警告一个有效的 URL，那么它只是 javascript 的问题
这很奇怪，我记得它是函数的名称。我会编辑我的答案
我真的很抱歉你说的是正确的它是 {% random_video %} 请编辑你的答案它是正确的

【解决方案3】：

这是我更喜欢连接 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>

我所做的是在 Django 视图中呈现您的 HTML 页面，并将您的变量传递到上下文字典中，该字典稍后可以在您的 HTML 标记或脚本标记中访问。

我还在模板标签中使用了一个 |safe 参数来删除一些不需要的字符串。

干杯，希望对您有所帮助！我在我的许多项目中都尝试过这个东西，它对我来说一直很成功。

【讨论】：