将 Django 数据库 pk id 传递给 Dash 应用程序答案

【问题标题】：Passing a Django database pk id to Dash app将 Django 数据库 pk id 传递给 Dash 应用程序
【发布时间】：2021-10-02 05:27:26
【问题描述】：

我已成功地将 Dash 应用程序嵌入到我的 Django 应用程序中。我可以显示简单的图。但是我想要做的，并且无法通过以下文档来做，是将一个 pk id 变量传递到 Dash 应用程序中，根据该 pk 提取相关的数据库信息，然后绘制它。

我的 urls.py:

urlpatterns = [
    url(r'^$', views.home, name='home'),
    url(r'^model/(?P<pk>\d+)/$', views.model, name='model'),

views.py：

def home(request):
    return render(request, 'home.html')


def model(request, pk):
    context = {'data' : {'pk': pk}}
    return render(request, 'model_results.html', context)

models.html 模板：

{%load plotly_dash%}
<body>
<div class="container">
    <!--Row with two equal columns-->

    <div class="row">

        <div class="col-lg-1 col-md-1 col-xl-1 col-sm-1">
           <div class = "card">
            <div class = "card-body">
                {%plotly_app name="tutorial_1" initial_arguments=data%}
            </div>
           </div>
        </div>
    </div>

</div>
</body>

最后，我的仪表板应用程序：

app = DjangoDash('tutorial_1')


app.layout = html.Div(children=[
    html.H1(children='Dash Tutorials'),
    dcc.Graph(
        id='example',
        figure={
            'data': [
                {'x': [1, 2, 3, 4, 5], 'y': [9, 6, 2, 1, 5], 'type': 'line', 'name': 'Boats'},
                {'x': [1, 2, 3, 4, 5], 'y': [8, 7, 2, 7, 3], 'type': 'bar', 'name': 'Cars'},
            ],
            'layout': {
                'title': 'Basic Dash Example'
            }
        }
        )
])

if __name__ == '__main__':
    app.run_server(debug=True)

从其他示例中我不清楚如何使用 Django ORM 通过在 Dash 应用程序中包含一些内容（例如 doc_obj = model_example.objects.get(pk = pk)）来提取所需的信息。

【问题讨论】：

标签： python django plotly-dash

【解决方案1】：

在将 dash 应用程序嵌入到 .html 中时，我也花了一些时间来理解 initial_arguments 参数

首先，由于您将 context = {'data' : {'pk': pk}} 从您的视图传递到您的 html，因此嵌入式 dash-plotly 应用程序可以理解在渲染调用中传递的字典命名。因此，您应该写{%plotly_app name="tutorial_1" initial_arguments=context%} 而不是{%plotly_app name="tutorial_1" initial_arguments=data%}。

其次，在将 Dash 应用程序嵌入 html 模板时，initial_arguments 参数用于设置 Dash 应用程序中已定义的对象中的值。在这种情况下，我了解您想通过您的 URL 发送一个 pk 值。为此，您应该在 Dash 应用程序中有一个 id='pk' 的元素，并且该值将通过初始参数在此元素参数之一中设置。在其他解决方案中，您可以在破折号布局中有一个 Div 来保存此值：

app.layout = html.Div([
    html.Div(id='pk', title="#")
])

而对于你认为的context字典定义，你应该写context = {'pk' : {'title': pk}}，以便在标题中保存pk值。

之后，您可以使用包含该布局元素值的回调，以便根据该 pk 提取相关 DB 信息，然后根据需要绘制它。

在这里，我为您提供了一个有用的 YouTube 教程，其中 dash 回调是快速且易于理解的，而不是阅读大量文档：https://www.youtube.com/watch?v=mTsZL-VmRVE

希望你觉得这很有用！

【讨论】：

另外，我不知道您使用的是哪个版本的 Django-Dash，但 if __name__ == '__main__': app.run_server(debug=True) 在最新版本中已弃用

【解决方案2】：

您应该能够通过在 DashApp 中定义一个回调函数来做到这一点，这样您就可以访问 args 和 kwargs，其中包含查询 ORM 所需的上下文。从那里，假设您正确导入相关模型，您应该能够从回调中查询 Django ORM。

示例（如文档中所提供）：

def callback_c(*args,**kwargs):
    da = kwargs['dash_app']
    return "Args are [%s] and kwargs are %s" %(",".join(args), kwargs)

django-plotly-dash：扩展上下文：https://django-plotly-dash.readthedocs.io/en/latest/extended_callbacks.html#extended-callbacks

【讨论】：

“dash_app”在这里代表什么？
@DeathbyGreen 这是dash应用程序传递的一个参数，我直接从文档中复制了这段代码。我不确定它到底代表什么。我需要查看源代码。