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

Posted 2023-02-24

【中文标题】Django模板Javascript将python变量传递给javascript

【英文标题】：Django template Javascript passing a python variable to a javascript one

【发布时间】：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)查看。

【参考方案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 参数来删除一些不需要的字符串。

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