Dash 2.16版本新特性介紹

添加微訊號 CNFeffery 備註「dash學習」

即刻加入 dash 套用開發技術交流群

❝

本文範例程式碼已上傳至我的 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
)
defswitch_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學習」加入我的技術交流群，一起成長一起進步。

掃描下方二維碼加我好友備註 dash學習

即刻加入 dash 套用開發技術交流群