如何将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. 从安全角度出发，最好将Django数据相关逻辑{% if x > y %}保留在模板中，还是可以将逻辑部分移至JS + Vue并仅将数据结构保留在模板中。我之所以这样问是因为，当我在浏览器窗口中检查页面源代码时，可以看到整个JS代码，但是看不到html的Django条件语句中的任何内容：{% if x>y %} ----THIS IS INVISIBLE IN A BROWSER---- {% 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 ...）来完成；如果不是，那么您可能不需要这样的框架。