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

Question

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

有人可以建议一种解决方法(除了在 JS 文件夹中保留上述文件的重复项之外)。我想避免重复(因为这会使我的维护工作增加一倍)

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

注意:主要问题是任何 JS 解决方案都必须存在非 JS 后备。该项目的一些用户来自一个转发代理，该代理会删除所有 <script>标签。想想Unobtrusive JS .

Answer 1

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

您有多种选择如何在弹出窗口中显示 HTML 内容(例如说明)。

这里概述了 2 种方法:

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

这种方法一次性加载所有内容，并且 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 项目设置，因此此代码未经测试。