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

Question

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

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

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

注意：主要的缺点是，任何JS解决方案都必须存在非JS后备。该项目的某些用户来自剥离所有<script>标签的正向代理。想想Unobtrusive JS。

Answer 1

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

您有几个选项可用于在弹出窗口中显示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项目设置，因此该代码未经测试。