Доступ к папке шаблонов Django через /static/js/

Question

В моем проекте Djano у меня есть файл JS внутри /project/static/js/, Требуется доступ к файлам, хранящимся на /project/templates/, Я не могу получить доступ к этому месту из файла JS.

Может кто-нибудь предложить обходной путь (если не считать дубликаты указанных файлов в папке JS). Я хотел бы избежать дублирования (так как это удваивает мое обслуживание в будущем)

Особенности задачи: у меня есть несколько HTML-шаблонов с инструкциями. JS, который я написал, просто берет тот же текст инструкции и отображает его как текст в динамическом всплывающем окне.

Примечание. Основная проблема заключается в том, что для любого решения JS должен существовать запасной вариант без JS. Некоторые из пользователей этого проекта исходят из прямого прокси, который удаляет все <script> теги. Думаю, ненавязчивый JS.

Answer 1

Там нет необходимости доступа projects/templates от static папка.

У вас есть несколько вариантов отображения содержимого HTML, например инструкций, во всплывающем окне.

Вот схема 2 способов сделать это:

1-й вариант: загрузить весь контент одновременно

Этот подход загружает все за один раз, а js только изменяет видимость всплывающей инструкции. Если вы используете Bootstrap, то модал - это то, что сделает вашу жизнь проще. Вам даже не нужно писать какие-либо 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>

2-й вариант: загрузить дополнительный контент по запросу, используя 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, поэтому этот код не проверен.