关于在 JS 文件中使用 jinja 模板

Question

我一直在使用一个模板，其中上一个和下一个按钮的图像位于 JavaScript 文件中。我正在使用的框架是 Django，有没有任何解决方案可以在 JS 文件中对这些图像使用 jinja 模板/渲染。

JS代码：

$(".active-banner-slider").owlCarousel({
        items:1,
        autoplay:false,
        autoplayTimeout: 5000,
        loop:true,
        nav:true,
        navText:["<img src={% static 'img/banner/prev.png' >","<img src={% static 'img/banner/next.png' %}>"],
        dots:false
    });

我对html文件使用了相同的静态方法并且它有效，我不知道这种方法是否适用于JS文件？如果这样做，正确的方法是什么？

Answer 1

是的，您可以使用 Django 模板处理器或 Jinja（如果您愿意）生成网页的 JS 组件。但是，您确实需要确保在正确的上下文中生成 JS（由适当的标签包围，在渲染输出的正确位置）。您还必须小心使用 { { 和 } }（重要的空格！）对您的 JS 进行编码，切勿使用 {{。

如果您使用“查看页面源代码”和浏览器的调试工具，您可能会发现自己做错了什么。

我的网站基础模板有一个块onready_js，如下所示：

<script type="text/javascript"> $(document).ready(  function() {
{% block onready_js %}{% endblock onready_js %}   
   }); 
</script>

当页面准备就绪时，您可以在其中注入要执行的 JS 位，就像这样（忽略不相关的细节，除了使用 {{...}} 和 {% if ... %} 等。缺少任何块定义，基本模板生成一个空的$(document).ready( function() { });

{% block onready_js %}

{% if form or POST_name %} 
  // activate the button column to POST to this target with this name
  var buttons = $('button.MyFilterSelectButton');
  buttons.attr('type','submit').attr('name','{{POST_name}}')
  buttons.click( function(event){ 
  $('#id_{{POST_name}}').val( $(this).attr('value') );
    /* stuff deleted */
  $('.MyFilterSelectCol').show();

{% else %}
  // hide the button column which doesn't do anything useful
  $('.MyFilterSelectCol').hide();
{% endif %}

{% endblock onready_js %}