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

Posted

技术标签:

【中文标题】django将数据传递给javascript的最佳方式【英文标题】:django best way to pass data to javascript 【发布时间】:2016-12-03 22:07:43 【问题描述】:

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

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

var data = 'data';  

data 在此示例中可能是 json。

将模板代码放入 javascript 中,这对我来说似乎很丑陋和不好,而且我不喜欢 javascript 中的全局变量的想法(旧方式,它不能很好地扩展)。它也不允许我把它放在外部 JS 文件中。有没有更好(更干净)的方法?

【问题讨论】:

data - 这是 json 数据? ***.com/questions/38620816/… Django Template Variables and Javascript的可能重复 【参考方案1】:

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

在views.py文件中

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

块引用

在你的 html 中

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

【讨论】:

亲爱的,我想使用 javascript 将这些数据放在模板上,我该怎么做,你能帮忙。 简单且完美运行,但要注意“数据”等变量的通用名称。我花了一个小时来解决冲突,因为“数据”已在我的应用程序的其他地方使用(没有考虑),这真的搞砸了【参考方案2】:

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

【讨论】:

【参考方案3】:

有一些方法可以巧妙地将预加载的序列化数据与其余代码隔离开来。

示例 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 等框架上构建您的应用,并利用组件的服务器端呈现。

【讨论】:

实际上我正在探索您建议的最后一种方法。组件的服务器端渲染 - 它是什么,它如何与 django 一起使用?任何参考都会很棒。 @user3599803 当然,上次我偶然发现github.com/markfinger/python-react,README 中有很多关于 Django 特定集成的内容。自己还没用,只是在研究。【参考方案4】:

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

如果需要,您可以传递 json,但至少可以在使用 escapejs 在模板中渲染之前清理 data

var data = 'data|escapejs';

希望对你有帮助

【讨论】:

以上是关于django将数据传递给javascript的最佳方式的主要内容,如果未能解决你的问题,请参考以下文章

iOS Swift:查询完成后将数据传递给其他 VC 的最佳方式

javascript Angular - 将数据传递给路由

javascript 将数据传递给vue根实例

在将数据传递给序列化器 django api 时添加额外的上下文

Django Rest Framework:如何将数据传递给嵌套的序列化器并仅在自定义验证后创建对象

VUE.JS 将数据传递给 D3 - 做对了吗?