Django: Как работать с CSS / JS, специфичными для тега шаблона? - PullRequest
Новая
       15

Django: Как работать с CSS / JS, специфичными для тега шаблона?

2 голосов
/ 30 января 2012

Фон:

У меня есть css и js, которые используются только тегом шаблона карт Google, который я включаю в свои шаблоны, когда это необходимо.

Inside template tag google_map:
...
...
return render_to_string('google_map.html', context)

Внутри google_map.html У меня есть необходимые css и js: 

<link rel="stylesheet" type="text/css" href="mystyle.css" />

Моя проблема:

У меня есть страница с 3 картами, поэтому 3 обращения к тегу шаблона.Это означает, что CSS и JS включены в 3 раза на одной странице.[Не должно происходить]

Теперь я не могу включить эти css и js в заголовок страницы, поскольку на всех страницах нет карт, поэтому на всех этихстраниц, это было бы бременем.

Что мне делать, чтобы, если на странице было 3 или более карт, даже тогда было только одно включение css & js, и оно не повторялось?

Ответы [ 2 ]

5 голосов
/ 30 января 2012

Я бы порекомендовал следовать шаблону, представленному Полом Айришем для Ненавязчивое всеобъемлющее выполнение с поддержкой DOM на основе разметки . У этого подхода есть ряд побочных преимуществ, таких как инкапсуляция, пространство имен и т. Д., Но главным преимуществом для вас будет условное выполнение JavaScript на основе идентификатора или класса <body>.

.

Таким образом, в вашем базовом шаблоне измените тег <body> на что-то вроде следующего: 

<body class="{% block body_class %}{% endblock %}">

Тогда для шаблонов, которым нужны карты, просто сделайте: 

{% block body_class %}{% if block.super %}{{ block.super }} {% endif %}maps{% endblock %}

Это выглядит немного сложным, но все, что он делает, - это наследует от значений любые родительские шаблоны, установленные для этого блока. Блок if используется для условного включения пространства, необходимого между несколькими классами.

Наконец, в вашем JavaScript вы просто создаете модуль для «карт», как описано в статье, и помещаете туда все свои JS, специфичные для карт.

0 голосов
/ 30 января 2012

Вы можете использовать новый блок django в разделе <head> вашего базового шаблона, который вы расширяете: 

<head>
  /* ... other css/js calls */
  {% block googlemapassets %}{% endblock %}
</head>

Затем в шаблоне представления (при условии, что content является вашим основным блоком контента): 

{% block content %}
  {% google_map %}
{% endblock %}
{% block googlemapassets %}
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
{% endblock %}
...