在 Plotly Dash 仪表板中允许动态对象创建和删除的最佳方法是什么？答案

【问题标题】：What is the best way for allowing for dynamic object creation and removal in a Plotly Dash dashboard?在 Plotly Dash 仪表板中允许动态对象创建和删除的最佳方法是什么？
【发布时间】：2020-06-20 08:41:06
【问题描述】：

目前，我有一个存储卡片元素字典的类，每个元素都是唯一的。该类还可以生成这些卡片并将它们附加到字典或从字典中删除卡片。但是，我不确定如何通过回调函数最好地允许此操作，因为卡片的 ID 在制作卡片之前不存在，并且该功能不直接在 Dash 框架内，因为字典对象充当存储对象的中介。

基本上，我想知道使用回调动态创建和销毁对象的最佳方法是什么？

谢谢！

【问题讨论】：

标签： python flask callback dashboard plotly-dash

【解决方案1】：

假设你想避免额外的计算来构建你不会使用的卡片，我建议创建一个创建每张卡片并将这些函数存储在字典中的函数。 （您也可以使用允许特异性的参数创建通用函数）

my_card_functions = {
  'id_1': make_id_1,
  'id_2': make_id_2,
}

可以这样创建卡片：

my_id = 'id_1'
f = my_card_functions[my_id] # will break if id isn't registered
my_card = f()

您可以将要创建的卡片存储在dcc.store 对象中。以下是您可能会考虑的一些代码示例：

# Pretend these are structured properly
dcc.Store(id='cards_data')
html.Div(id='my_cards',children=[])

@app.callback(
  Output('my_cards','children'),
  [Input('cards_data','data')],
  [State('my_cards','children')]
)
def make_cards(data, children):
  """Makes cards for each id"""
  if not data:
    raise PreventUpdate

  # The following code is not correct but serves as a demonstrative example
  # Some data structure manipulation is necessary to access 
  # the ids from the children elements
  children_ids = [x['id'] for x in children]

  # Assuming your data looks something like this:
  # {'add':['id_1','id_2']}

  for x in data['add']:
    if x not in children_ids:
      f = my_card_functions[my_id]
      my_card = f()

      # Store values
      children.append(my_card)

  return children

请注意，这种方法不能解决卡片的移除问题。这很容易做到，但可能需要更动态地使用缓存。

【讨论】：

我的方法与此稍有不同，但您对使用 dcc.Store 元素的建议很棒，因为这样我可以将内容存储在可通过回调直接访问的对象中。但我基本上在一个回调中添加和删除卡片之间的功能分开，如果 id 已经不存在，它会添加一张卡片，反之亦然。然后另一个像你一样监视 State 并遍历整个列表，要么从缓存中检索，要么制作需要存在的卡片。

【解决方案2】：

仅根据您的问题，我有一些即时建议（因为您没有发布任何工作代码）。 1.默认生成所有卡片元素。它们可以生成，但不能“显示” 2. 添加回调以根据用例动态切换卡片的显示/渲染。这样，您将在回调中使用卡片元素 ID。

希望这会有所帮助。

【讨论】：

感谢您的回答，但我特别想避免这种情况，因为我正在谈论大量（10k+）潜在对象，每个对象也会打开对 API 的请求，所以这个方法根本不切实际。对请求使用缓存甚至是不切实际的，因为 API 需要每天至少调用一次。