本文示例代碼已上傳至我的
Github
倉庫https://github.com/CNFeffery/dash-master
大家好我是費老師,幾天前Dash
發佈了其2.16.0
版本,隨後在修復了一些潛在問題後,於今天發佈了可穩定使用的2.16.1
版本,執行下面的命令進行最新版本Dash
的安裝:
pip install dash -U
2.16
版本中爲我們帶來了多項強大的新功能,進一步提升了Dash
應用開發的效率和靈活性,下面我們就來一起get其中的重點😉:
1 常規回調新增running
參數
新版本中爲常規的回調函數新增了running
參數,使得我們可以針對若干個Output
目標屬性,快捷定義其在當前回調函數運行中及未運行狀態下分別的屬性值,參數格式如下:
running=[
[Output('目標id', '目標屬性'), 運行時的值, 未運行時的值],
...
]
舉個簡單的例子,針對fac
中的開關組件AntdSwitch
,假如其每次被用戶點擊進行狀態切換後,都會在對應回調函數中執行具有一定耗時的計算過程,那麼配合running
參數,我們就可以快捷實現當回調運行時,開關呈現加載中狀態:
app1.py
import time
import dash
from dash import html
import feffery_antd_components as fac
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div(
[
fac.AntdSwitch(
id='switch-demo',
checked=False
),
html.Div(id='message-container')
],
style={
'padding': 50
}
)
@app.callback(
Output('message-container', 'children'),
Input('switch-demo', 'checked'),
running=[
[Output('switch-demo', 'loading'), True, False]
],
prevent_initial_call=True
)
def switch_demo(checked):
time.sleep(1)
return fac.AntdMessage(
content='已開啓' if checked else '已關閉',
type='success'
)
if __name__ == '__main__':
app.run(debug=False)
2 瀏覽器端回調新增set_props()
方法
在過去的版本中,我們如果需要通過回調函數對目標組件的相應屬性值進行更新,需要在編寫回調函數時提前書寫編排好相應的角色,而從2.16
版本開始,Dash
針對瀏覽器端回調,新增了set_props()
方法,其第一個參數用於定義目標組件id
,第二個參數用於定義針對目標組件需要更新的屬性字典。
基於這個特性,我們可以在日常編寫回調邏輯的過程中,進行很多技巧性的靈活操作,譬如,在下面的例子中,每次點擊按鈕,都會批量更新下方各個區塊的內容和字體大小:
對應源碼如下,可以看到其中對應的瀏覽器端回調函數編排中無需編排相應區塊角色,均在函數體中基於set_props()
實現:
app2.py
import dash
from dash import html
import feffery_antd_components as fac
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div(
[
fac.AntdButton(
'點我',
id='trigger-demo',
type='primary'
),
fac.AntdRow(
[
fac.AntdCol(
fac.AntdCenter(
id=f'demo-block{i+1}'
),
span=4,
style={
'padding': 5
}
)
for i in range(30)
]
)
],
style={
'padding': 50
}
)
app.clientside_callback(
'''(nClicks) => {
// 內部自由批量更新其他目標屬性
for ( let i = 1; i <= 30; i++ ) {
// 調用set_props()
window.dash_clientside.set_props(
`demo-block${i}`,
{
children: `nClicks: ${nClicks || 0}`,
style: {
height: 100,
background: '#262626',
color: 'white',
borderRadius: 4,
fontSize: Math.min(14 + nClicks, 24)
}
}
)
}
return window.dash_clientside.no_update;
}''',
Output('trigger-demo', 'id'),
Input('trigger-demo', 'nClicks')
)
if __name__ == '__main__':
app.run(debug=False)
最騷的是,set_props()
的使用不限於瀏覽器端回調內部,譬如我們直接在瀏覽器控制檯中就可以調用進行更新:
這意味着從此之後,Dash
可以不依賴具體的回調函數,與其他任意的javascript
生態相通😎,譬如我們可以在原生Echarts
的圖表事件監聽函數中直接操控Dash
中的相關組件,這將極大程度上拓展Dash
的靈活程度~
以上就是本文的全部內容,對Dash
應用開發感興趣的朋友,歡迎添加微信號CNFeffery
,備註“dash學習”加入我的技術交流羣,一起成長一起進步。