我曾经将我的数据“绑定”到 DOM,直到我发现了数据绑定库。 我的问题是,假设我有一个包含模型记录的表,我如何使用 JS 构建该表,即将对象传递到 javascript 中,而不是直接在模板中构建表?
到目前为止,我发现的唯一方法是这样的:
var data = '{{data}}';
对于此示例,{{data}}
可以是 json。
对我来说,将模板代码放入 javascript 中似乎又丑又糟糕,而且我也不喜欢 javascript 中的全局变量的想法(旧方法,并且扩展性不好)。它也不允许我将其放入外部 JS 文件中。有更好(而且干净)的方法吗?
django 模板自动转义所有标签 {{ }}。
如果table_data已经是模板标签中的json数据。简单。
<script>
var myTable = {% autoescape off %}{{ table_data }}{% endautoescape %};
</script>
不需要括号和引号,它是 javascript 中的数组(例如 var example = ['test'];)
如果数据不是json,则在请求(渲染模板)中返回。 示例
import json
from django.shortcuts import render
def home(request):
table_data = MyModel.objects.select_related().values('items1', 'items2')
return render(
request,
'main.html',
{
'table_data': json.dumps(list(table_data))
})
我也遇到了同样的问题,这就是我解决的方法
在views.py文件中
context = {'data': json.dumps (data)}
return render (request, 'demo / home.html', context)
块引用
在你的html中
var data = JSON.parse ("{{data | escapejs}}");
我也是这样做的,但是我没有传递太多数据,只传递初始化JS代码所需的几个参数。主要数据通过 API 传递。
如果需要,您可以传递 json,但您至少可以在使用
escapejs在模板中渲染之前清理
data
var data = '{{data|escapejs}}';
希望这有帮助
有多种方法可以将预加载的序列化数据与代码的其余部分完全隔离。
示例 1 — 将预加载的数据分配给
window
上的全局变量,然后在表格组件中使用它:
<html>
<meta charset="utf-8">
<body>
<script>
// Loading the data for use in JS components here
(function () {
window.tableData = JSON.parse('{{ table_data }}');
}());
</script>
<script src="table.js"></script>
<!-- table.js uses window.tableData when building the table -->
</body>
示例2——将表格组件封装为模块,从主模板初始化并传递预加载的数据。
<html>
<meta charset="utf-8">
<body>
<table id="theTable"></table>
<script src="table.js"></script>
<!-- table.js exports itself globally as window.table -->
<script>
// Loading the data and initializing table component
(function () {
var tableEl = $('#theTable');
var tableData = JSON.parse('{{ table_data }}');
window.table.init(tableData, tableEl);
}());
</script>
</body>
等等!
想要完全避免 Django 模板语言和 JavaScript 的混合?
想要一切 - 将 Django 模板语言排除在外 并且避免额外的 XHR 来获取数据?
您可以使用
json_script
过滤器。
安全地将 Python 对象输出为 JSON,包装在标签中,准备与 JavaScript 一起使用。
https://docs.djangoproject.com/en/4.2/ref/templates/builtins/#json-script