如何将带有 django 标签的 javascript 代码加载到我的 django 模板中

Posted 2023-02-24

【中文标题】如何将带有 django 标签的 javascript 代码加载到我的 django 模板中

【英文标题】：How do i load javascript code with django tags into my django template

【发布时间】：2016-09-18 00:46:02

【问题描述】：

情况：我使用的是 Django 1.9。我有一个javascript循环，它需要一些存储在数据库中的javascript。这个 js 有一些 django 标记，当该 js 加载到我的模板中时，我想加载这些标记。 这是函数：

% extends "base_clean.html" %
% load i18n %
% block title %% trans "Campaign" % -  campaign.name % endblock %

% block content %


Some HTML

Some CSS

<script type="text/javascript">

Some javascript functions.

displayed = 0;
delay = 1000;
(function loop() 
   setTimeout(function() 
   p = pq.getMessage()
   if( p != false ) 
      posthtml = get_message_html(p);
      displayed++;

        display_style.layout.js|safe  /* !!!!!!!!!!!!!!!!!!*/


   if( pq.messagesCount() < 10 )
      pq.getMessages()
   
   loop();
 , delay);
)();
</script>
% endblock %

这就是 display_style.layout.js|safe 加载的内容：

setTimeout(function() 
        $('#messages_container').append(posthtml);
        % if display_style.post_append_effect %
          $(posthtml).addClass("animated  display_style.post_append_effect.css ");
        % endif %
      , 900);
    

    if(displayed ==  display_style.messages_per_page )
        delay =  display_style.seconds_between_messages 000;
    

    if(displayed >  display_style.messages_per_page )
      $target = $('#messages_container div.list-group-item').first()
      % if display_style.message_remove_effect %
        $target.removeClass("animated  display_style.post_append_effect.css ")
        .addClass("animated  display_style.post_remove_effect.css ");
      % endif %
      setTimeout(function() 
        $target.remove();
        displayed--
      , 900);

    

如您所见，它有一些我也想渲染的 django 标签。但我有“Uncaught SyntaxError: Unexpected token %”

编辑：添加了 django 标头标签。和模板的结构 忘了说，如果我明确地写了我想渲染到我的模板的 js，它就可以工作......问题是试图将标签渲染到渲染的 js 中

【问题讨论】：

问题不在于您显示的代码，但您并未显示所有内容。请显示模板的其余部分和错误跟踪的其余部分。

好的，我会简化模板文件，因为它非常大.. 只是把它所涉及的内容放在这里。关于错误跟踪它只是......我的意思是，chrome开发工具在第一个“% if display_style.post_append_effect %”

【参考方案1】：

我认为问题在于您将第二个模板作为文本字符串加载，而不是使用 Django 的 include template tag。尝试将 display_style.layout.js|safe 更改为% include "display_style.layout.js" %，任何语法错误都会变得更加明显。

您还应该考虑使用 Django 的静态文件来加载您的 javascript，而不是在您的模板中包含 javascript。然后根据this answer，您可以简单地在<script> 标记中定义要传递给javascript 的变量，您可以在javascript 文件中引用这些变量。比如：

Django 模板

% load staticfiles %
<!-- Some html -->
<script>
    var displayStyle =  display_style ;
</script>
<script type="text/javascript" src="% static 'your_js_file.js' %"></script>
<!-- Rest of your HTML -->

通过静态文件加载的JS文件

var displayStyle = window.displayStyle || null;
if (displayStyle) 
    // Your code here.

最后，特定错误的一种可能性是您包含的模板在某处有一个% 字符。这需要在 django 模板系统中转义为 %%。

【讨论】：

我会尝试静态文件的方式。我仍然无法“动态”加载js ..我得说这样做的目的是什么，也许你可以暗示我应该做什么。它必须采用布局的 html、css 和 javascript 来显示消息。所以我应该能够“插入”和“拔出”布局具有的附加 html/css/js。我已经完成了 html 和 css 部分。问题出在 js PS：感谢@YPCrumble 的回答

@Ctrl4 你不应该“拔出”javascript - 很可能有一种方法可以使相同的JS代码适用于你的html的不同迭代。还有一个问题 - 在第一个 setTimeout 函数之后的代码的第五行，您没有额外的 吗？

实际上我的想法很糟糕......我将 django 模板与 mustache js 混合在一起，但我以一种糟糕的方式“拔掉”了 js。如您所见，我有一个额外的，但这是我的这种错误思考的一部分。我做到了，感谢您对使用静态文件的回答。