javascript 中 Django 的模板标签

Question

我的应用程序的 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)

我的 create_table.html 是：

{% 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 tablediv 元素中显示“这是行数据”文本。

但是，显示的只是{{ row_data )).

我已经阅读了关于在 Javascript 中使用 Django 变量的其他类似问题，但根据我的理解，他们都建议按照我的方式做，所以我不确定我做错了什么。

Answer 1

当您编写 时{{ row_data }}，您使用的是 Django 特定的“语言”，称为Django 模板语言，这意味着所提到的语法只能由 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 实例传递给模块是可选的，这里只是作为示例来展示如何将外部依赖项传递给模块。

Answer 2

如果您的模板中有一个元素可以检测点击次数，为什么不换一种方式将上下文变量传递给您的 JS 函数呢？

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

通过这样做，您可以检查页面以查看数据是否将正确传递。您可能必须通过像escapejs或 之类的过滤器传递数据safe。

或者你可以做类似的事情

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

这种方法的问题是变量的范围，因为您可能不想全局声明事物，因此它可以被认为是一种简单的方法，但不一定是最佳解决方案。