javascript - 如何将 dict 的 dict 从 Django 发送到 javascript

Question

我想将数据从 Django 发送到 JavaScript，这样我就可以在 JS + Vue 中编写所有逻辑并保持 html 干净。

在 Django 中我有

context={'names':{'fn':'john','ln':'cena'}}
return render(request,'app/page1.html',context)

在我有的page1.html模板中

<script type="text/javascript"> var names="{{names}}"; </script>

在javascript中如何访问names.fn和names.ln？

我还有两个相关问题:

1. 这是渲染模板时直接从 Django 向 JS 发送数据的首选 Django 方式吗？ (我知道的唯一其他方法是通过 Ajax 调用。这里我不想在页面渲染后进行额外的 Ajax 调用)
2. 从安全 Angular 来看，将 Django 数据相关逻辑 {% if x > y %} 保留在模板内更好，还是可以将逻辑部分移至 JS + Vue 并保留模板中的数据结构。我问这个是因为当我在浏览器窗口中检查页面源时，我可以看到整个 JS 代码，但我看不到 html 中 Django 条件语句内的任何内容: {% if x>y %} ----THIS在浏览器中不可见---- {% endif %}

谢谢

Answer 1

有json_script :

{{names|json_script("names")}}

然后，在 JS 中:

var names = JSON.parse(document.getElementById('names').textContent);

或者，安装 django-jsonify ;然后，你可以直接说

{% load jsonify %}
<script type="text/javascript"> var names={{names|jsonify}}; </script>

至于你的第二个问题:Vue(或 Angular、React、Ractive 或 Knockout...)所做的一切都是客户端，Django 所做的一切都是服务器端。如果您正在构建单页应用程序，您应该更喜欢尽可能使用 Vue(或 Angular、React、Ractive 或 Knockout...)；如果不是，那么您可能不需要这样的框架。