Django HTML 模板中的 Javascript 变量答案

【问题标题】：Javascript variables in Django HTML templatesDjango HTML 模板中的 Javascript 变量
【发布时间】：2016-04-22 22:56:18
【问题描述】：

我正在编写一个 Django 应用程序，虽然对 Django 有点熟悉，但我对 JavaScript 非常不熟悉。我将几行 JavaScript 添加到我的一个页面中以包含地图。

该脚本仅包含初始化地图，然后根据我的数据库中保存的信息添加标记。

鉴于代码如此之少，将脚本留在 HTML 模板中并使用 {{info}} 从我的数据库中传递信息是否仍被视为不好的做法？

如果是这样，您认为哪种方法更好？

【问题讨论】：

您可以在模板中添加html脚本标签，并从您的静态文件区域导入.js。
是的，将 js 包含到模板中（即使是几行 js）也是一种不好的做法。考虑将js分离成文件...
我知道如何导入 .js 文件。如果我这样做，将信息从我的数据库传递到文件中会变得更加困难。在 Django 中有没有好的方法来做到这一点？ @AndriyIvaneyko
创建一个单独的视图来返回 JsonResponse

标签： javascript python django

【解决方案1】：

在我的 Django 项目中，如果我使用的是所有其他模板都扩展的“基本”模板，我只需在 HTML 中的 <head></head> 内放置一个名为“extrahead”的块。

<html>
    <head>
        ........ other header stuff
        ........ include other scripts
        {% block extrahead %}
        {% endblock %}
    </head>
    .............
</html>

...然后在您想要地图的模板中使用该块。那是假设它只是静态js代码？

【讨论】：

是的，我同意 Andriy，最好使用 {% static 'path/to/script.js' %} 而不是直接将 js 放入模板中。

【解决方案2】：

是的，这是不好的做法。

考虑为您的应用定义静态文件夹，如官方 django 文档页面所述：Managing static files 并通过static template tag 上传您的js。

您可以通过创建单独的 django 视图来获取 {{ info }} 变量中的数据，该视图将返回 JsonResponse，然后执行 AJAX 请求以从新创建的 js 文件中获取所需的数据。

【讨论】：

【解决方案3】：

我假设您的建议是将 JS 脚本和其所需数据都放入模板中（通过字符串插值将数据注入 JS 脚本）

您可以看到这会如何迅速失控。下面我提供代码组织的级别，大致按升序排列（一般来说，你越往前越好）

1。使用脚本标签包含您的 JS，而不是嵌入到 HTML 中

首先：将 JS 放入它自己的 .js 文件中并通过<script> 标签包含它很容易。所以让我们这样做。此外，现代浏览器可以并行加载文件，因此同时加载 HTML 和 JS 文件是一个优势。

2。避免使用 Django 模板将数据输入 JS

现在我看到人们做的另一个问题是在包含他们的 JS 代码之前使用 <script>data = {"info": "something"}</script> 将数据传递到 JS。

由于许多原因，这并不理想，因为数据在 Django 模板中被字符串插值：

3。让 JS 通过 Django (REST) API 拉取数据

但是，既然您说您熟悉 Django，我建议您创建一个视图，以 JSON 格式返回客户端 JS 所需的数据。例如。在/api/info 上返回{"info": "something"} 的东西。

有很多方法可以实现这一点，here's a start（尽管可能已经过时）

然后我会让 script.js 文件通过一个简单的 HTTP GET 调用读取数据。很多 JS 库都可以轻松为您做到这一点。

这种方法的一些优点

您的代码（JS 部分）独立于数据部分（JSON 数据）
您可以轻松查看/测试输入 JSON 的内容，因为它只是一个 HTTP GET 请求
您的 HTML/JS 部分是完全静态的，因此可以缓存，从而提高加载页面的性能。
将 Python 数据转换为 JSON 非常简单（无需插值功夫）

【讨论】：

谢谢，这正是我想要的！@bakkal