javascript中Django的模板标签

n3h0vuf2  于 2023-01-24  发布在  Java
关注(0)|答案(5)|浏览(147)

我的应用程序的urls.py是:

from django.urls import path
from . import views

app_name = 'javascript'
urlpatterns = [
    path('create_table', views.create_table, name='create_table')

我的views.py是:

def create_table(request):
    row_data = "this is row data"
    context = {'row_data': row_data}
    return render(request, 'javascript/create_table.html', context)

我的创建表是:

{% load static %}
<button id="create_table">Get data</button>
<div id="place_for_table"></div></div>
<script src="{% static 'javascript/scripts/create_table.js' %}"></script>

我的create_table. js是:

function create_table() {
    document.getElementById("place_for_table").innerHTML = '{{ row_data }}';
}

document.getElementById("create_table").onclick = function() {
    create_table()
}

我尝试做的是在单击create_table按钮时运行create_table.js脚本,该按钮应在place for table div元素中显示“this is row data”文本。
但是,显示的只是{{ row_data ))
我读过其他类似的关于在Javascript中使用Django变量的问题,但据我所知,他们都建议我这样做,所以我不确定我做错了什么。

rfbsl7qr

rfbsl7qr1#

如果你的模板中有一个元素,你可以检测点击,为什么不反过来做,你可以把上下文变量传递给你的JS函数?

<button onclick="create_table({{ row_data }})">Click me</button>

通过这样做,你可以检查页面,看看数据是否会被正确传递,你可能需要通过一个过滤器,如escapejssafe
或者,您可以执行以下操作

{% load static %}

<button id="create_table">Get data</button>
<div id="place_for_table"></div></div>

<script type="text/javascript">
    var row_data = "{{ row_data }}";
</script>
<script src="{% static 'javascript/scripts/create_table.js' %}">
</script>

这种方法的问题在于变量的作用域,因为您可能不希望全局声明,因此可以认为它是一种简单的方法,但不一定是最佳解决方案。

xv8emn3q

xv8emn3q2#

当你编写{{ row_data }}时,你使用的是Django特有的“语言”Django template language,这意味着上面提到的语法只能被Django模板“理解”。
你在这里所做的是加载一个单独的JavaScript文件,在这个文件中Django模板语法根本不起作用,因为当浏览器开始计算这个文件时,{{ row_data }}看起来只是另一个字符串,而不是你所期望的。
如果你把JavaScript例子直接内嵌到Django模板中,它应该可以工作。
或者,你可以用Django模板中的数据“引导”外部JavaScript文件,下面是我的做法:

创建表格.html

<script src="{% static 'javascript/scripts/create_table.js' %}"></script>
<script type="text/javascript">
$(function() {
  var create_table = Object.create(create_table_module);
  create_table.init({
    row_data: '{{ row_data }}',
    ...
  });
});
</script>

注意:将上述代码封装在jQuery的.ready()函数中是可选的,但如果您已经在应用中使用jQuery,则这是确保在初始页面加载后可以安全操作DOM的一种简单方法。

创建表格.js

var create_table_module = (function($) {
  var Module = {
    init: function(opts) {
      // you have access to the object passed
      // to the `init` function from Django template
      console.log(opts.row_data)
    },
  };

  return Module;
})(jQuery);

注意:将jQuery示例传递给模块是可选的,这里只是作为一个示例来展示如何将外部依赖性传递给模块。

k3fezbri

k3fezbri3#

我已经找到了一个解决方案,以避免额外键入所有以前的答案。
这是一个有点hacky:
只需将myjavascriptfile.js转换为myjavascriptfile.js.html,并将代码 Package 在<script>...</script>标签中,而不是将它们链接到模板文件中。

我的模板.html

....
    {% block js_footer %}
    {% include "my_app/myjavascriptfile.js.html" %}
    {% endblock js_footer %}

我的javascript文件.js.html

<script type="text/javascript">
    console.log('the time now is {% now "Y m d H:i:s" %}');
    ...
</script>
ecbunoof

ecbunoof4#

我所做的是将javascript/jquery包含在{% block scripts %}中,并使用Django特定的数据,如下所示:
'

$.ajax({
   type:"GET",
   url: "/reserve/run/?ip={{ row_data }}",
   dataType: "html",
   async: true,
   }).done(function(response) {
     $("#Progress").hide();
     $('#clickid').attr('href','javascript:ClearFlag()');
     var win = window.open("", "MsgWindow");
     win.document.write(response);
   });

'

ddhy6vgd

ddhy6vgd5#

代替在一个单独的js文件中编写函数,在你的html页面中把它写在script标签中,这样它就可以使用django模板语言

相关问题