[英]django best way to pass data to javascript
在我发现数据绑定库之前，我曾经将我的数据“绑定”到 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))
})
我也是这样做的，但是我没有传递太多数据，只传递了一些我需要初始化 JS 代码的参数。 主要数据通过 API 传递。
如果需要，您可以传递 json，但至少可以在使用escapejs在模板中渲染data之前清理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——将table组件封装为一个模块，从主模板初始化，并传递预加载的数据。
<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 来获取数据？
我遇到了同样的问题，这就是我解决它的方法
在 views.py 文件中
context = {'data': json.dumps (data)}
return render (request, 'demo / home.html', context)
块引用
在你的 html
var data = JSON.parse ("{{data | escapejs}}");
对于我的特定情况，将数据从PHP传递到JavaScript的最佳方法
[英]Best way to pass data from PHP to JavaScript for my particular case
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.