Python plotly Dash更新/刷新布局

时间:2018-11-27 11:43:34

标签: python plotly-dash

我有一个应用程序,该应用程序从第二个模块导入layout,然后在将app.layout返回此标签内容的情况下在标签中呈现。我有一个问题,就是使用默认的输入值导入布局,当我用键填充输入并在选项卡之间更改时,然后当我单击返回到“输入”选项卡时,这些值将重置为默认的“ x”。我设法通过在回调中第二次声明布局来解决了这个问题,但这看起来并不好,并且需要编写两次布局才能获得更多功能。有我的代码:

if 'manager' not in vars():
    manager = Recognition('xx', 'xx')
    print('defining manager')

lcheck = 0
while lcheck == 0:
    layout = [
        html.Div([
            html.Div(
                [
                    html.H3("Primary API key"),
                    dcc.Input(
                        id='primary-key',
                        value=manager.api_key,
                        placeholder='Enter a value...',
                        type='text',
                        style = {"width":"50%"}
                    ),
                    html.H3("Private API key"),
                    dcc.Input(
                        id='private-key',
                        value=manager.api_secret,
                        placeholder='Enter a value...',
                        type='text',
                        style = {"width":"50%"}
                    ),


                ],
            ),
            html.Button('Submit', id='button', className='btn btn-primary'),
            html.Div(id='output-hidden')
        ])
    ]
    lcheck=1


@app.callback(
    Output('primary-key', 'value'),
    [Input('button', 'n_clicks')],
    [State('primary-key', 'value'), 
     State('private-key', 'value')]
)
def update_output(n_clicks, value1, value2):
    values = {'value1':value1, 'value2':value2}
    global manager
    global layout
    manager.update(value1, value2)
    layout = [
        html.Div([
            html.Div(
                [
                    html.H3("Primary API key"),
                    dcc.Input(
                        id='primary-key',
                        value=manager.api_key,
                        placeholder='Enter a value...',
                        type='text',
                        style = {"width":"50%"}
                    ),
                    html.H3("Private API key"),
                    dcc.Input(
                        id='private-key',
                        value=manager.api_secret,
                        placeholder='Enter a value...',
                        type='text',
                        style = {"width":"50%"}
                    ),


                ],
            ),
            html.Button('Submit', id='button', className='btn btn-primary'),
            html.Div(id='output-hidden')
        ])
    ]

    lcheck=0
    return values['value1']

您可以看到,每次我使用按钮发送新数据时,它都会保存新的布局,但是这种解决方案看起来很糟糕,我想找到一种更好的解决方案,而又不会造成代码混乱。整个过程就是更新布局变量中的value=manager.api_key,value=manager.api_secret,。我当时正在考虑像从普通list那样访问值,但是由于它没有嵌套为常规列表,所以这是不可能的。有什么方法可以访问例如layout.getid("primary-key").value之类的值?如何清除此代码?

1 个答案:

答案 0 :(得分:4)

我已经找到了解决这个问题的方法。在我的应用程序中,每次选择标签时,我们都会渲染app.layout,因此它始终会渲染在首次导入期间分配的layout。首先,我想每次都在回调函数中重写布局,但是写两次layout=是没有意义的。因此,我在破折号docs中找到了一个名为dash core component的{​​{1}}(它将json存储在隐藏的div中)。我这样使用它:

dcc.Store

此div直接位于“ Tabs” div之后,并作为“高速缓存”内存供选项卡记住以前的状态。最后,我更新了回调,以在每次发送新密钥时更改html.Div([ dcc.Store(id='storage') ], id="hiddendata", style={"display": "none"}, ), 中的数据,因此当我离开标签页时,其他标签页会知道其中的内容:

dcc.Store