django 将数据传递给 javascript 的最佳方式

问题描述 投票:0回答:5

我曾经将我的数据“绑定”到 DOM,直到我发现了数据绑定库。 我的问题是,假设我有一个包含模型记录的表,我如何使用 JS 构建该表,即将对象传递到 javascript 中,而不是直接在模板中构建表?

到目前为止,我发现的唯一方法是这样的:

var data = '{{data}}';  
对于此示例,

{{data}}
可以是 json。

对我来说,将模板代码放入 javascript 中似乎又丑又糟糕,而且我也不喜欢 javascript 中的全局变量的想法(旧方法,并且扩展性不好)。它也不允许我将其放入外部 JS 文件中。有更好(而且干净)的方法吗?

javascript django variables inject
5个回答
5
投票

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))
        }) 

5
投票

我也遇到了同样的问题,这就是我解决的方法

在views.py文件中

context = {'data': json.dumps (data)}
return render (request, 'demo / home.html', context)

块引用

在你的html中

var data = JSON.parse ("{{data | escapejs}}");

4
投票

我也是这样做的,但是我没有传递太多数据,只传递初始化JS代码所需的几个参数。主要数据通过 API 传递。

如果需要,您可以传递 json,但您至少可以在使用

escapejs
在模板中渲染之前清理 data

var data = '{{data|escapejs}}';

希望这有帮助


4
投票

有多种方法可以将预加载的序列化数据与代码的其余部分完全隔离。

示例 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 的混合?

  • 通过 XHR 传递所有数据——在页面加载后向服务器发出 AJAX 请求;编写一个 Django 视图,以 JSON 形式返回您所需的数据,这很容易在 JavaScript 中解析。

想要一切 - 将 Django 模板语言排除在外 并且避免额外的 XHR 来获取数据?

  • 考虑在 React.js 或 AngularJS 等框架上构建应用程序,并利用组件的服务器端渲染。

0
投票

您可以使用

json_script
过滤器。

安全地将 Python 对象输出为 JSON,包装在标签中,准备与 JavaScript 一起使用。

https://docs.djangoproject.com/en/4.2/ref/templates/builtins/#json-script

© www.soinside.com 2019 - 2024. All rights reserved.