1

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

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

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

注意：主要问题是任何 JS 解决方案都必须存在非 JS 后备。该项目的一些用户来自一个去除所有<script>标签的正向代理。想想不显眼的 JS。

4

1 回答 1

1

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

您有多种选择如何在弹出窗口中显示 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 项目设置，所以这段代码未经测试。

于 2018-12-21T23:18:41.513 回答