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

Question

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

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

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

About using jinja templating in JS file

javascript

django

jinja2