Как использовать модели Джанго в JavaScript

Question

У меня есть приложение в Django с 2 новостями в базе данных. Я использую views.py для отображения этих новостей на моей html-странице.

Models.py

class News(models.Model):
    news_title     = models.CharField(max_length=150)
    news_body       = models.TextField(max_length=1500)

Views.py

def news(request):
    news_f = News.objects.all().order_by('-news_id') 
    news_f_html = serializers.serialize("json",News.objects.all())
    news_dic=  {'news_f':news_f,'ac_tab_n':'ac_tab', 'news_f_html':news_f_html}
    return render(request, 'news.html',news_dic)

Я хочу отобразить тело новости, используя HTML-тег, но не могу, потому что это строка. Я читал и пытался сериализовать новости, чтобы использовать news_f_html в JavaScript.

scripts.js

var news = "{{ news_f_html }}"; 

Но это не работает. Я не могу отобразить, например:

console.log(news[1].news_title) //Note that I have 2 news in my db app

Answer 1

Статические файлы (js, css) ничего не знают о контексте страницы. Вам необходимо явно передать этот контекст в ваш код js. Функция render возвращает HttpResponse , который по умолчанию представляет собой простой текст и работает только с шаблонами. Вот и все, Django передает данные только в шаблон news.html (и в вызываемые в нем шаблоны, например, {% include "template.html"%}), , но не в статические файлы . Если вы хотите передать данные в js-файл, тогда пусть ваше представление вернет JsonResponse , и ваш js-код получит данные по URL. Так как вы только начинаете свое путешествие в Джанго, попробуйте сделать это следующим образом:

В своем шаблоне news.html напишите эти строки (это то, как вы инициализируете переменные):

{# news.html #}
...
<script>
  var news = {{ news_f_html }}; // note that this assignment without quotes - "{{ news_f_html }}" will be just string variable
</script>
...

И после этих строк импортируйте свой js-файл с кодом, который будет обрабатывать ваш контекст. Вот и все, js-код получил эти переменные из шаблона и уже может работать с ними.

{# news.html #}
...
<script>
  var news = {{ news_f_html|safe }}; // note that this assignment without quotes - "{{ news_f_html }}" will be just string variable
</script>
...

<script src="{% static 'path/to/your/js/code.js' %}"></script>

Поскольку вы уже используете сериализаторы ( Я думаю, что это DRF см. Обновление),поэтому в будущем посмотрите на представления Django Rest Framework для создания API.

Обновление:

Итак, вы используете Сериализаторы ядра Django .

В этом случае для достижения желаемого результата вам необходимо изменить свое представление, например, так:

def news(request):
    news_f = News.objects.all().order_by('-news_id') 
    news_f_html = []
    for instance in News.objects.all():  # it's not serialization, but extracting of the useful fields
        news_f_html.append({'pk': instance.pk, 'title': instance.news_title, 'body': instance.news_body})
    news_dic = {'news_f': news_f, 'ac_tab_n': 'ac_tab', 'news_f_html': news_f_html}
    return render(request, 'news.html', news_dic)