Question

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

到目前为止搜索我发现的唯一方法就是这样：

var data = '{{data}}';

{{data}}可以是json这个例子。

这对我来说似乎很丑陋，把模板代码放在javascript中，而且我也不喜欢javascript中的全局变量的想法（旧的方式并且它不能很好地扩展）。它也不允许我把它放在外部JS文件中。是否有更好（和干净）的方式？

Answer 1

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

示例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-make AJAX请求传递给服务器;编写一个Django视图，将您需要的数据作为JSON返回，这很容易在JavaScript中解析。

想要一切 - 保持Django模板语言和避免额外的XHR来获取数据？

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

Answer 2

django template autoescape所有标签{{}}。

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

Answer 3

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

在views.py文件中

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

Blockquote

在您的html中

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

Answer 4

这也是我如何做到的，但我没有传递太多数据，只需要一些参数来实现JS代码。主要数据通过API传递。

如果需要，您可以传递json，但在使用escapejs

在模板中呈现之前，您至少可以清除data

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

希望这有帮助

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

4 个答案: