запуск javascript в частичном шаблоне django, похожем на вложенный компонент - PullRequest
Новая
       14

запуск javascript в частичном шаблоне django, похожем на вложенный компонент

0 голосов
/ 16 декабря 2018

Я хотел бы сделать «компонент» (на самом деле несколько, но давайте начнем с одного).То есть я хотел бы иметь файл шаблона, который сам может включать в себя javascript.Тогда я хотел бы иметь возможность включать этот «компонент» в любой (другой) файл шаблона Django.

Важно: в base.html я включаю служебный javascript (например, jquery или bootstrap или любой другой)и я хочу, чтобы эти вещи были в области видимости в javascript компонента.

Существуют ли другие архитектурные способы достижения этого?

Вот изображение одного шаблона Django: The basic structure

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

With a partial template

Вот код, который можно использовать вместе с ним (Я набрал опечатку базы, поэтому я выбрал тему):

models.py 

class CommonTask(models.Model):   ## nothing special
    name = models.CharField(max_length=30, default='yummy')

urls.py 

app_name = 'food'
urlpatterns = [
    ## the list view on the left
    url(r'^edible/?', views.EdibleList.as_view(), name='edible'),
    ## the partial on the right
    url(r'^billable/edit/(?P<jid>[a-zA-Z0-9-\w:]+)/?', views.EdibleEdit.as_view(), name='edibleEdit'),

views.py 

class EdibleList(ListView):
    template_name = 'food/edible-list.html'

    def get_queryset(self):
        return Dish.objects.filter('edible'=True)

class EdibleEdit(UpdateView):
    form_class = EdibleForm
    template_name = 'food/edible-edit.html'

    def get_initial(self):
        …  # for the form/formset info

    def get_object(self):
        return get_object_or_404(Dish, pk=self.kwargs['pk'])

baste.html 

<!DOCTYPE html>
{% load static %}

<html lang="en" xml:lang="en" dir="ltr" xmlns= "http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="{% static "css/main.css" %}">
    {% block meta_tags %}{% endblock meta_tags %}
    {% block scripts-head %}{% endblock scripts-head %}
    <title>Edibles -  {% block title%}{% endblock title%}</title>
    {% block extra_head %} {% endblock extra_head %}
  </head>

  <body>
    {% block content %} {% endblock content %}
    {% block scripts %} {% endblock scripts %}
    <script>
      {% block script-inline %} {% endblock script-inline %}
    </script>
    <footer> FOOTER </footer>
  </body>
</html>

list.html 

{% extends "baste.html" %}
{% load static %}

{% block title%}Edible List - {{dish.name}} {% endblock title%}

{% block extra_head %}
  <link rel="stylesheet" href="{% static "food/food.css" %}">
{% endblock extra_head %}

{% block script-inline %}  
    console.log('This works, as it is in the views original compiled template');

    console.log('This does not work, as it relies on the partial to be loaded, but 
       the partial isn't loaded yet, and this wont update after the partial is loaded);
    var interpuncts = document.getElementsByClassName("interpuncts");
    for (let i=0; i < interpuncts.length; i++){
      interpuncts[i].onclick=function(event){
        console.log('gh1');
      };
    };

    // showing the right partial when clicked
    pane = document.getElementById("edible-single");
    showPane = function(link) {
      fetch(link).then(function(response) {
          return response.text();
      }).then(function(body) {
          pane.innerHTML = body;
      });
    };

    let edibleLinks = document.querySelectorAll("a.edible-link");
    edibleLinks.forEach(function(edibleLink) {
        edibleLink.addEventListener('click', function(e){
          e.preventDefault();
          showPane(edibleLink.getAttribute('href'));
        });
    });

{% endblock script-inline %}  

{% block scripts %} {% endblock scripts %}  

{% block content %}

  {% include "food/nav.html" with currentView="edibleList" %}

  <div class="container-fluid">
    <h1 class="text-center">Edible Dishes</h1>
    <hr>
    <div class="row scrollable-row">
      <div class="col-3 scrollable-col">    
        <table class="table">
          <tbody>
            {% for dish in dish-list %}
              <tr class="d-flex">
                <td class="col">
                  <a class="edible-link"
                     href="{% url 'food:ediblebleDetail'
                     pk=dish.pk %}" 
                     data-pk="{{dish.pk}}">{{dish.name}}</a>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="col-9 scrollable-col" id="edible-single"></div>
    </div>
  </div>

{% endblock content %}

editPartial.html 

{% load static %}

{# no blocks work in this, because it can't extend the list.html, because the view #}
{# can't render to endpoint(sibling) templates at the same time #}
{# {% block * %} #}

<script>
  console.log('This won\'t run, as it is loaded separately as just an inclusion
     text from the list AJAX call.')
  $(document).ready(function() {
    console.log('This can\'t work because it relies on $ to be accessible, which it is not')
    var interpuncts=document.getElementsByClassName("interpuncts");
    for (let i=0; i < interpuncts.length; i++){
      interpuncts[i].onclick=function(event){
        console.log('I can not get a handle on the partial template items after
          they are loaded as a partial');
      };
    };
  });  
</script>

<div class="container">
  Dish - {{dish.name}}
  <hr>

  <form action="{% form url %}" method="post">
    {% csrf_token %}
    {{ form }}
    {# Some element(s) that needs some javascript to act on it, more comprehensive than #}
    {# bootstrap show/hide can do  #}
    <div class="interpuncts">
      ··· Do something with this element
    </div>
    <input class="btn btn-primary pull-right" type="submit" value="Save">
  </form>
</div>

ПРИМЕЧАНИЯ:

  • Это похоже на партиалы Rails, если я помню, и определенно выполнимо в 'Angular / Ember'.Я думаю, что это сводится к некоторой архитектуре или пакету, о котором я не знаю и не могу найти документацию.Я не уверен, что это выполнимо с тегами включения.
...