javascript - 如何在 JavaScript 中使用 Django 模型

Question

我有一个 Django 应用程序，数据库中有 2 条新闻。我使用views.py 来在我的html 页面中显示这些新闻。

模型.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 标签显示新闻正文，但我不能，因为它是一个字符串。我一直在阅读并尝试序列化新闻以便在 JavaScript 中使用 news_f_html 。

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文件，那么让你的 View 返回 JsonResponse ，让你的js代码通过url获取数据。由于您刚刚开始 Django 之旅，请尝试以类似的方式进行操作:

在您的 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 views创建 API。

更新:

所以您正在使用 Django's core serializers .

在这种情况下，为了获得所需的结果，您需要更改 View ，例如，如下所示:

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)