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

情境：我正在使用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 %}

正如您所看到的，它有一些django标记，我也想呈现这些标记。但我有“未捕获的SyntaxError:意外标记%”

编辑：添加了django标题标记。以及模板的结构

---

忘了说，如果我显式地编写要呈现给模板的js，它就可以工作了。。。问题是试图将标记呈现到呈现的js中，我认为问题在于您正在将第二个模板作为文本字符串加载，而不是使用Django的。尝试将

{display\u style.layout.js | safe}}

更改为

{%include“display\u style.layout.js”%}

，任何语法错误都会变得更加明显

你还应该考虑使用Django的静态文件来加载JavaScript，而不是在模板中包含JavaScript。然后，您可以简单地在

标记中定义要传递给javascript的变量，您可以在javascript文件中引用该标记。比如：

Django模板

---

最后，特定错误的一种可能性是，所包含的模板的某处有一个

%

字符。在django模板系统中，需要将其转义为

%%

。

问题不在您显示的代码中，但您没有显示所有内容。请显示模板的其余部分和错误跟踪的其余部分。好的，我将简化模板文件，因为它非常大。。我把它涉及的东西放在这里。关于错误跟踪，只是。。。我的意思是，chrome开发工具在第一个“{%if display\u style.post\u append\u effect%}”处放置了一个错误，我将尝试静态文件方式。我仍然无法“动态”加载js。。我得说这是为了什么，也许你能给我一个提示，我该怎么做。它必须采用html、css和javascript的布局来显示消息。因此，我应该能够“插入”和“拔出”布局中附加的html/css/js。我已经完成了html和css部分。问题在于js-PS：谢谢@YPCrumbleanswer@Ctrl4您不必“拔掉”javascript——很可能有一种方法可以让相同的JS代码在html的不同迭代中工作。还有一个问题-在第一个

setTimeout

函数之后，在该代码的第五行中没有额外的

}

吗？实际上我认为这一切都不好。。。我把django模板和mustache js混合在一起，但我用了一种糟糕的方式“拔掉”js。正如你所看到的，我有一个额外的}但这是我的错误想法的一部分。我做到了，多亏了你关于使用静态文件的回答。

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);

    }

{% 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 -->

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