如何在django-plotly-dash启动时将Django视图返回的JSON存入dcc.Store

实现步骤 #

你可以通过模板注入+Dash客户端回调的方式实现需求，不需要改动你现有视图和基础布局的核心结构：

• 第一步：修改Django模板dashboard.html，在渲染Dash应用的代码之前加入全局变量注入逻辑，把上下文里的page_data传递到前端JS环境：

<script>
// 这里用Django自带的escapejs过滤器处理，避免XSS风险和特殊字符解析问题
const initPageData = JSON.parse('{{ page_data|escapejs }}');
</script>

如果你的data是Django查询集等非原生JSON结构，需要先在视图层用django.core.serializers序列化为标准JSON格式后再传入上下文

• 第二步：给Dash应用添加初始化客户端回调，应用加载时直接把全局变量写入dcc.Store：

from dash import clientside_callback, Input, Output

clientside_callback(
    """
    function(pathname) {
        return initPageData;
    }
    """,
    Output("page-data", "data"),
    Input("url", "pathname"),
    prevent_initial_call=False
)

可参考的相关资源方向 #

• django-plotly-dash官方文档中「服务端上下文传递到Dash应用」「模板变量注入」相关章节
• Plotly Dash官方文档中dcc.Store组件使用说明、客户端回调开发指南
• Django官方文档中模板变量安全过滤、escapejs过滤器相关说明

内容的提问来源于stack exchange，提问作者Nipu