本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/dash-master

大家好我是费老师,使用Dash开发过交互式应用的朋友,想必都不会对回调函数感到陌生,作为Dash应用中实现各种交互逻辑的“万金油”方式,不管是常规的@app.callback(),还是对应浏览器端回调app.clientside_callback()ClientsideFunction(),其中编排各种回调角色时,我们都是按照先Output,再Input,最后State的顺序依次罗列的,且各个角色存在多个时,建议用[]将它们包裹住,以提升代码可读性。

但这并不是不可打破的铁律,事实上,Dash还额外提供了多种多样的回调角色编排方式,官方称之为Flexible Callback Signatures,从而解决单个回调函数中角色太多时代码可读性变差等问题,今天的文章中,我就将带大家学习相关的实用知识,从而更清晰地进行Dash应用开发及维护。

阅读本文大约需要6分钟

为了方便演示,我们构造下图所示的简单示例Dash应用(完整源码见文章开头地址):

如果要编排以两个按钮作为示例Input角色,两个输入框作为示例State角色,并向两个文字组件中分别Output不同的参数值内容的回调函数,按照常规的写法,对应的回调函数可以写作下方形式:

@app.callback(
[Output('demo-output1', 'children'),
Output('demo-output2', 'children')],
[Input('demo-button1', 'nClicks'),
Input('demo-button2', 'nClicks')],
[State('demo-input1', 'value'),
State('demo-input2', 'value')],
prevent_initial_call=True
)
def demo_callback(nClicks1, nClicks2, value1, value2): return [
f'nClicks1: {nClicks1}, nClicks2: {nClicks2}',
f'value1: {value1}, value2: {value2}'
]

下面我们以此为基础,分别介绍其他不同的写法:

1 字典化角色编排

我们可以用字典来分别编排各类型的角色,其中具体可细分为:

  • InputState字典化

当仅对回调函数的InputState角色进行字典化编排时,我们可以通过自定义的键值对,完成针对回调函数输入参数的映射,改造后的示例回调函数如下:

@app.callback(
[Output('demo-output1', 'children'),
Output('demo-output2', 'children')],
inputs=dict(
nClicks1=Input('demo-button1', 'nClicks'),
nClicks2=Input('demo-button2', 'nClicks')
),
state=dict(
value1=State('demo-input1', 'value'),
value2=State('demo-input2', 'value')
),
prevent_initial_call=True
)
def demo_callback(nClicks1, nClicks2, value1, value2):
'''字典化角色编排:仅Input、State字典化''' return [
f'nClicks1: {nClicks1}, nClicks2: {nClicks2}',
f'value1: {value1}, value2: {value2}'
]
  • 全部角色字典化

如果我们将回调函数的Output也进行了字典化改造,那么在回调函数中就需要返回对应键值对的字典(返回单个dash.no_update时不受限制),示例写法如下:

@app.callback(
output=dict(
content1=Output('demo-output1', 'children'),
content2=Output('demo-output2', 'children')
),
inputs=dict(
nClicks1=Input('demo-button1', 'nClicks'),
nClicks2=Input('demo-button2', 'nClicks')
),
state=dict(
value1=State('demo-input1', 'value'),
value2=State('demo-input2', 'value')
),
prevent_initial_call=True
)
def demo_callback(nClicks1, nClicks2, value1, value2):
'''字典化角色编排:全部角色字典化''' return dict(
content1=f'nClicks1: {nClicks1}, nClicks2: {nClicks2}',
content2=f'value1: {value1}, value2: {value2}'
)

通过字典化角色的形式,我们可以为每个角色自由起名字,建议是起跟功能相关的名字,如login_button_click,或登录按钮点击这样的中文键名,只要能帮助你更好地读懂回调函数逻辑就可以。

2 嵌套式字典化角色编排

当我们在使用上文所介绍的字典化角色编排方式时,除了在字典中平铺书写相应角色外,还可以向下继续进行字典嵌套,从而实现更自由的参数分组效果,相应的,对应输入参数也会以字典的形式传入内部的各键值对参数:

@app.callback(
output=dict(
content1=Output('demo-output1', 'children'),
content2=Output('demo-output2', 'children')
),
inputs=dict(
nClicks1=Input('demo-button1', 'nClicks'),
nClicks2=Input('demo-button2', 'nClicks')
),
state=dict(
input_values=dict(
value1=State('demo-input1', 'value'),
value2=State('demo-input2', 'value')
)
),
prevent_initial_call=True
)
def demo_callback(nClicks1, nClicks2, input_values):
'''嵌套式字典化角色编排''' return dict(
content1=f'nClicks1: {nClicks1}, nClicks2: {nClicks2}',
content2='value1: {value1}, value2: {value2}'.format(**input_values)
)

3 对需要返回若干dash.no_update的情况进行简化

针对字典化角色编排Output的方式,当我们仅需要对部分输出目标返回实际值,对其余目标返回dash.no_update时,可以配合标准库collections中的defaultdict以及dash回调的上下文简化相关过程:

@app.callback(
output=dict(
content1=Output('demo-output1', 'children'),
content2=Output('demo-output2', 'children')
),
inputs=dict(
nClicks1=Input('demo-button1', 'nClicks'),
nClicks2=Input('demo-button2', 'nClicks')
),
state=dict(
value1=State('demo-input1', 'value'),
value2=State('demo-input2', 'value')
),
prevent_initial_call=True
)
def demo_callback(nClicks1, nClicks2, value1, value2):
'''字典化Output配合defaultdict''' # 假设我们需要除了content1之外的其他角色默认输出为dash.no_update
output = defaultdict(
lambda: dash.no_update,
dict(
content1=f'nClicks1: {nClicks1}, nClicks2: {nClicks2}'
)
) return {
key: output[key]
# 通过上下文遍历所有Output字典键名
for key in dash.ctx.outputs_grouping.keys()
}

其中构造defaultdict并设置默认值等过程,我也会在fac即将发布的0.3.x版本中封装为一步到位的工具函数,毕竟这种场景在进阶Dash应用的开发中还是很常用的,省得在常规方式中逐个写dash.no_update或其他默认值。

除此之外,有关Flexible Callback Signatures还有一些其他的写法,但是在我看来并没有字典化写法这么实用,感兴趣的朋友可以移步https://dash.plotly.com/flexible-callback-signatures了解更多。


以上就是本文的全部内容,更多有关dash应用开发的前沿知识和技巧欢迎持续关注玩转dash公众号。

在Dash中更灵活地编写回调函数的更多相关文章

  1. 在Java中如何编写回调函数,以及回调函数的简单应用

    import static java.lang.System.out; import static java.lang.System.err; import java.util.logging.Lev ...

  2. 如何更好的编写async函数

    2018年已经到了5月份,node的4.x版本也已经停止了维护 我司的某个服务也已经切到了8.x,目前正在做koa2.x的迁移 将之前的generator全部替换为async 但是,在替换的过程中,发 ...

  3. C#中委托、事件和回调函数的理解

    在C#中我们经常会碰到事件,尤其是在WPF或者WinForm中,窗体加载.或者点击一个按钮,都会触发事件.实际上,事件是对委托的封装.如果不进行封装,让委托暴露给调用者,调用者就可以把委托变量重新引用 ...

  4. extjs中组件监听器里面的回调函数说明

    近期在看项目源代码的时候发现了例如以下代码,当中_searchSupplierStore是JsonStore对象 _searchSupplierStore.on('beforeload',functi ...

  5. Opengl中的GLUT下的回调函数

    void glutDisplayFunc(void (*func)(void)); 注册当前窗口的显示回调函数 参数: func:形为void func()的函数,完成具体的绘制操作 这个函数告诉GL ...

  6. JavaScript ES7 中使用 async/await 解决回调函数嵌套问题

    原文链接:http://aisk.me/using-async-await-to-avoid-callback-hell/ JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题.以往在浏览器中, ...

  7. jQuery中ajax方法无法执行回调函数问题

    最近遇到一个问题,发现使用jquery的ajax方法时,回调方法无法执行,而使用$.load()方法时却能正确返回数据.经过长时间调试最终发现是自己粗心大意,原来后台返回的是json数据,而返回的数据 ...

  8. 解决有关flask-socketio中服务端和客户端回调函数callback参数的问题(全网最全)

    由于工作当中需要用的flask_socketio,所以自己学习了一下如何使用,查阅了有关文档,当看到回调函数callback的时候,发现文档里都描述的不太清楚,最后终于琢磨出来了,分享给有需要的朋友 ...

  9. 详解C#中通过委托来实现回调函数功能的方法

    委托:类型安全的指向函数的指针 使用步骤 1:声明一个委托 delegate string DelString(string s) 2:定义一个委托变量 DelString del = new Del ...

  10. 使用代码给Unity中的动画片段绑定回调函数

    在制作动作游戏的时候,需要播放许多动画,同时还有个需求,那就是动画播放到一定时间时,给一个回调函数,好做对应的状态变更, 我查了一下,发现如果使用的是unity自带的动画系统,要做到这样的话,需要这样 ...

随机推荐

  1. 【go语言】2.2.1 数组和切片

    数组和切片是 Go 语言中常用的数据结构,它们都可以存储多个同类型的元素. 数组 数组是具有固定长度的数据类型,它的长度在定义时就已经确定,不能随意改变. 你可以使用以下方式定义一个数组: var a ...

  2. 【做题笔记】树形 dp

    luoguP1122 最大子树和 Solve 设计状态 \(dp[i]\) 表示子树 \(i\) 的最大点权和,则有: 当 \(dp[son[i]] > 0\) 时,选以 \(son[i]\) ...

  3. K8S | Config应用配置

    绕不开的Config配置: 一.背景 在自动化流程中,对于一个应用来说,从开发阶段的配置管理,到制作容器镜像,再到最后通过K8S集群发布为服务,整个过程涉及到的配置非常多: 应用环境:通常是指代码层面 ...

  4. 《VTK图形图像开发进阶》第1-2章——一个稍微复杂的VTK程序

    VTK概览 数据可视化主要是通过计算机图形学的方法,以图形.图像等形式清晰有效地传递.表达信息,VTK是数据可视化的工具包. VTK全称(Visualization Toolkit),即可视化工具包, ...

  5. ubuntu/linux 好用的截图工具 搜狗输入法自带的截图快捷键,自己觉得不方便的话,修改为自己习惯的快捷键即可

    公司要求使用ubuntu开发,在安装完必要得开发工具之后,按照我在windows平台的习惯,就准备安装一个好用的截图工具了,我比较推荐的是snipaste([https://zh.snipaste.c ...

  6. Java日志框架的依赖设置备查(SLF4J, Log4j, Logback)

    前言 最近在看代码的过程中,发现身边的许多人在使用Java日志框架时,对于应该引入何种依赖不甚了解,搜索网络上的文章,常常也是互不一致.这篇文章可以看着是Java日志框架的入门使用和实践建议,重点介绍 ...

  7. WPF学习:Slider — 冒泡显示值

    想做一个下图所示的Slider,以冒泡的方式显示其Value值,该怎么做呢? 功能要求,当鼠标放在滑块上的时候,冒"泡"显示值:当滑块移动的时候,"泡"跟随移动 ...

  8. Netease研发实习生一面

    最想去的公司和部门..今天终于面了,感觉跪了..实质性的问题的确打得不好..庆幸的是拿到了B公司的offer,实习是不愁了.. 记下问题,希望对之后的同学有一定帮助. 问的问题总结: 1.进程线程协程 ...

  9. Azure Data Factory(七)数据集验证之用户托管凭证

    一,引言 上一篇文章中,我们讲解了 Azure Data Factory 在设置数据集类型为  Dataverse 的时候,如何连接测试.今天我们继续讲解认证方式这一块内容,打开 Link Servi ...

  10. Jquery 将 JSON 列表的 某个属性值,添加到数组中,并判断一个值,在不在数据中

    jquery 将 JSON 列表的 某个属性值,添加到数组中 如果你有一个JSON列表,并且想要将每个对象的某个属性值添加到数组中,你可以使用jQuery的$.each()函数来遍历JSON列表,并获 ...