如何在 Dash Web 应用程序中使用“dash.properties.Synced”？ | Python

Posted 2023-03-16

【中文标题】如何在 Dash Web 应用程序中使用“dash.properties.Synced”？ | Python

【英文标题】：How can I use "dash.properties.Synced" in the Dash web app? | Python

【发布时间】：2021-09-23 23:37:45

【问题描述】：

我指的是this post，以便我可以使用来自 Dash Web 应用程序中不同选项卡的数据。 但我无法使用dash.properties.Synced 并收到错误AttributeError: module 'dash' has no attribute 'properties'。

示例代码

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_daq as daq

from dash.dependencies import Input, Output, State

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config["suppress_callback_exceptions"] = True

app.layout = html.Div([
    dcc.Store(id="num_output", storage_type='session',),
    dcc.Tabs(id='tabs-example', value='tab-1', children=[
        dcc.Tab(label='Tab one', value='tab-1'),
        dcc.Tab(label='Tab two', value='tab-2'),
    ]),
    html.Div(id='tabs-example-content')
])


@app.callback(Output('tabs-example-content', 'children'),
              Input('tabs-example', 'value'))
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            html.H3('Tab content 1'),
            # dcc.Store(id="num_output", storage_type='local',),  # session, local
            html.Div(id="num_output2",),
            html.Div([daq.NumericInput(
                id="num_input",
                label='Vehicles',
                labelPosition='top',
                value=dash.properties.Synced(
                    id='store_model',
                    property='data',
                    default=4
                ),
            ), ], style='marginLeft': 20, 'marginRight': 20, 'width': '5%', 'display': 'inline-block'),

        ])
    elif tab == 'tab-2':
        return html.Div([
            html.H3('Tab content 2'),
            html.Div(id="num_output2",),
        ])


@app.callback(
    Output('num_output', 'data'),
    Input('num_input', 'value'))
def render_content(data):
    return data


@app.callback(
    Output('num_output2', 'children'),
    Input('num_output', 'modified_timestamp'),
    State('num_output', 'data'))
def render_content(ts, data):
    if data:
        return html.H4(f'out data')


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

【参考方案1】：

带有 dash.properties.Synced 的示例代码不是真正的 API，它是来自发帖人的虚构建议，作为帮助解决问题的可能方式。

我不知道有人将这个想法付诸实践。

可以通过使用全局和本地“存储”对象在选项卡之间共享状态，这些对象是您在从选项卡内更新时写入的对象，以及在选项卡上绘制内容时读取的对象。请参阅我在 original post

上描述这一点的尝试

【讨论】：

感谢您的回答。我猜你是“ncorran”。您能否分享一个示例代码来演示您的实现。这将帮助我理解这个概念。谢谢。