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

Question

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

有人可以建议解决方法（在 JS 文件夹中保留上述文件的副本）。我想避免重复（因为它会使我的维护工作加倍）

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

注意：主要问题是任何 JS 解决方案都必须存在非 JS 后备。这个项目的一些用户来自一个去除所有<script>标签的正向代理。想想Unobtrusive 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 项目设置，所以这段代码未经测试。