通过 /static/js/ 访问 Django 的模板文件夹

Question

在我的Djano项目中，我在/project/static/js/中有一个JS文件。它需要访问存储在/project/templates/的文件。我无法从js文件访问此位置。

有人能建议一个变通办法吗(除了在JS文件夹中保留上述文件的副本)。我想避免重复(因为这会使我的维护工作量翻倍)

任务说明：我有一些显示指令的HTML模板。我编写的JS只是采用相同的指令文本，并在动态弹出窗口中将其显示为文本。

注意：主要问题是任何JS解决方案都必须存在非JS回退。该项目的一些用户来自一个剥离所有<script>标签的前向代理。想想无偏见的JS。

Answer 1

无需从static文件夹访问projects/templates。

您可以选择如何在弹出窗口中显示HTML内容，如说明。

以下是两种方法的概述：

第一个选项：一次加载所有内容

这种方法一次性加载所有内容，js只更改弹出指令的可见性。如果你正在使用Bootstrap，那么modal会让你的生活更轻松。您甚至不需要编写任何js。使用Bootstrap，这看起来像：

<!-- main_template.html -->
<!-- Don't forget to load the bootstrap library here -->
....
<!-- icon to trigger the popup -->
<a data-toggle="modal" data-target="#InstructionModal">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp;Show Instructions
</a>
....
<!-- the bootstrap modal -->
<div class="modal fade" id="InstructionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Instructions</h4>
</div>
<div class="modal-body">
{% include 'instruction.html' %}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>

然后指令：

<!-- instruction.html -->
<p>
This is an instruction - You must follow it!
</p>

第二个选项：根据请求使用ajax加载其他内容

在这种情况下，您一开始不会加载额外的HTML内容，而是仅在请求时提供，即，如果有人单击显示说明图标。请注意，您需要jQuery才能实现这一点。

以下是您的说明(不要忘记更新您的urls.py)：

# view.py
def get_instructions(request):
return render(request, 'instruction.html')

指令模板仍然相同：

<!-- instruction.html -->
<p>
This is an instruction - You must follow it!
</p>

js:

<!-- get_instructions.js -->
....
<script>
$("#InstroductionModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
</script>

主模板：

<!-- main_template.html -->
<!-- Don't forget to load get_instructions.js -->
....
<!-- icon to trigger the popup -->
<a href="{% url 'get_instructions' %}" data-remote="false" data-toggle="modal" data-target="#InstructionModal">
<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>&nbsp;Show Instructions
</a>
<!-- the bootstrap modal -->
<div class="modal fade" id="InstructionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">Instructions</h4>
</div>
<div class="modal-body">
<p> Instructions will follow </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>

---

希望其中一种方法对您有效。不幸的是，我没有django项目设置，所以这段代码没有经过测试