Добавить тег шаблона Django с помощью Jquery

Question

Я хочу создать меню, в котором можно выделить одну ссылку, выделенную тегом {% block%}. У меня есть что-то вроде этого в моем Javascript:

<loop>
$('#a-div').append('{% block ' + variable + ' %} <a href...</a> {% endblock %}')
<endloop>

В источнике это отображается как "{% block Home%}"

Как сделать так, чтобы JQuery не добавлял это как строку, а как тег шаблона?

Answer 1

Вы не можете. По крайней мере, без отправки AJAX-запроса к шаблону Django. В вашем случае это будет медленно и делать ненужные дополнительные запросы. Это просто не стоит того. Вы можете вставить фрагменты из шаблонов Django через jQuery, используя, например, функцию jQuery load. Но вы не можете заменить определенный тег {% block %}, потому что к моменту запуска jQuery шаблон уже обработан (и ссылки на теги блоков удалены). Но это не та ситуация, когда вы должны делать это в любом случае.

Почему бы вам не выделить меню классом CSS? Вот мое обычное решение этой проблемы:

1. Создайте файл с именем base_extras.py в одной из ваших templatetags папок. Если у вас его нет, создайте его в соответствующей папке.

2. Внутри base_extras.py, вставьте этот код:

   from django import template
   from django.core.urlresolvers import reverse
   
   register = template.Library()
   
   @register.simple_tag
   def navactive(request, urls):
       if request.path in ( reverse(url) for url in urls.split() ):
           return "active"
       return ""
   

3. Теперь в вашем шаблоне, в ваших меню базового шаблона, сделайте что-то вроде этого:

   <ul class="menu">
       <li class="home {% navactive request 'home' %}"><a href="{% url home %}">Home</a></li>
       <li class="contact {% navactive request 'contact' %}"><a href="{% url contact %}">Contact</a></li>
       <li class="signup {% navactive request 'signup' %}"><a href="{% url signup %}">Sign up</a></li>
   </ul>
   

4. Это сделает так, чтобы меню, в котором находится ваш URL, имело класс active. Затем в своем CSS просто добавьте специальный класс для элемента меню с active, чтобы он немного отличался от других меню.

   ul.menu li.active {background: red; color: white;}
   

И если вам нужно изменить активное меню с помощью jQuery, вы можете просто удалить класс active во всех меню и добавить его во вновь выбранные меню:

$('ul.menu li').removeClass('active').find('.home').addClass('active'); // for example

Answer 2

Вы не можете так делать.Теги шаблонов Django обрабатываются на стороне сервера, прежде чем страница будет отправлена ​​в браузер.Javascript (включая jQuery), с другой стороны, вызывается в браузере после получения страницы с сервера.

Что вы можете сделать, это предварительно передать содержимое тега {% block %} в переменную JS ииспользуйте его в коде jQuery:

var blockContent = "{% block Home %} ... {% endblock %}";
// ...
$("#a-div").append(blockContent);

Если вам нужно выбрать более одного блока (как вы указываете в приведенном примере кода), вы можете прибегнуть к массиву предварительно визуализированных блоков..

Answer 3

Лучше всего создать прокси-представление, которое выполняет текущий запрос AJAX, обрабатывает результаты так же, как это делает javascript, а затем возвращает все, что вы пытаетесь получить из системы шаблонов Django.

Затем, вместо того, чтобы делать вызов AJAX, который вы в данный момент делаете, вместо этого вы вызываете свой собственный вид. Django выполняет обработку в представлении так, как должно, вы получаете детальный контроль над тем, что возвращается в ваш javascript, и это все еще только один (на стороне клиента) серверный вызов.