升级Bokeh至2.2.1后DataTable行选择JS回调失效求助

这是Bokeh版本迭代后的API调整导致的，既不是操作失误也不是框架bug，核心是2.x版本对交互事件的绑定逻辑做了明确拆分。

问题根源 #

在Bokeh 2.x之前，直接给ColumnDataSource设置callback确实能触发DataTable的行点击，但从2.x开始，框架把组件交互事件和数据源属性变更事件做了严格区分：

• 原来的source.callback仅用于监听数据源自身数据变更，不再响应DataTable的行点击操作
• 你尝试的source.js_on_change('value', callback)和source.js_on_change('start', callback)是错误的——ColumnDataSource本身没有value或start这些属性，它们是滑块（Slider）、范围选择器（RangeSlider）这类组件的专属属性，绑定不存在的属性自然会抛出Cannot read property 'connect' of undefined的错误

正确的实现方式 #

在Bokeh 2.x及以后版本，DataTable的行点击事件需要直接绑定到DataTable实例上，使用js_on_event方法监听'row_click'事件：

from bokeh.models import ColumnDataSource, CustomJS, DataTable, TableColumn

# 初始化数据源
source = ColumnDataSource(df)

# 定义JS回调（通过cb_data获取点击事件上下文）
callback = CustomJS(args=dict(other_source=your_other_source), code="""
    // 获取选中的行索引（支持多选，返回数组）
    const selectedRows = cb_data.selected.indices;
    if (selectedRows.length > 0) {
        const targetRow = selectedRows[0];
        // 从数据源中获取该行数据
        const rowData = source.data[targetRow];
        // 编写修改其他数据源的逻辑
        other_source.data = {
            // 你的数据更新规则
        };
        // 必须调用emit通知视图更新
        other_source.change.emit();
    }
""")

# 创建DataTable实例
columns = [TableColumn(field=col, title=col) for col in df.columns]
data_table = DataTable(source=source, columns=columns)

# 绑定行点击事件到DataTable
data_table.js_on_event('row_click', callback)

关键细节 #

• cb_data是Bokeh传递给回调的事件上下文，cb_data.selected.indices返回当前选中的行索引数组，若需要单选可设置data_table.selection_mode='single'
• 修改其他数据源后，必须调用other_source.change.emit()强制触发视图更新，否则界面不会同步变化

内容的提问来源于stack exchange，提问作者tamirg