2017-08-17 50 views
1

我創建了一個簡單的輸入對象是這樣的:如何在JavaScript中設置Bokeh中的輸入文本字段的值?

self.dummy_text = TextInput() 
self.dummy_text.css_classes = ['dummy_text'] 

而且我想與其他控制恢復此字段的值。例如這個按鈕:

self.dummy_button = Button(label="Foo", button_type="success") 
self.dummy_button.css_classes = ['dummy_button'] 

如果我改變手工輸入文本字段的值,該按鈕獲得輸入文本值好。但是,如果我修改由JavaScript(jQuery的)的值這樣的價值沒有收到所有:

$("#bokeh_iframe").contents().find(".dummy_text input").val('text value') 

我已經打開的背景虛化在iframe id爲bokeh_iframe。我需要使用find,因爲直接選擇器不工作。最後,我調用按鈕單擊方法是這樣的:

$("#bokeh_iframe").contents().find(".dummy_button button").get(0).click(); 

按鈕的方法是這樣的:

def dummy_button(self): 
    dummy_text_value = self.dummy_text.value 

這是怎麼回事?我需要告訴散景以其他方式同步數據嗎?我是否需要找到另一種通過JavaScript填充字段的方法?

注:我需要做此解決方法從外部應用程序(電子,即是建立與節點)

注2運行在背景虛化服務器的一些行動:另一個要素:prevObject: jQuery.fn.init(1)出現與輸入和按鍵對象,可能是這個問題?這就是爲什麼我需要使用get(0)

回答

1

爲了使BokehJS機械自動神奇地檢測和同步更改屬性(如輸入控件的值)的模式,你通常都設置.value屬性在BokehJS模型對象,而不是直接更改HTML屬性。

但是,Bokeh從來沒有真正意識到從「外部」JavaScript操作Bokeh模型的用例,所以它絕對沒有被優化以簡化或簡化。當Bokeh渲染頁面中的文檔時,它會在window.Bokeh.index對象中留下頂層視圖的索引。因此,一種絕對可行的方法是根據索引樹找到您關心的輸入窗口小部件的散景模型,然後更新其上的.value字段。

然而,可以在這種特殊情況下的工作設置HTML元素的值,並且也明確觸發change事件:

$("#bokeh_iframe").contents().find(".dummy_text input") 
    .val('text value') 
    .trigger('change'); 

那肯定會更容易,但未經測試(我不「噸有帶寬,試圖構建和測試一個完整的例子,令人遺憾。)


或者有某種方式使用CustomJS回調來重新表達你的意圖,使得w因爲Bokeh模型可以通過args屬性很容易地通過CustomJS JavaScript代碼獲得。

+0

我感謝你的幫助。你的意思是像這樣使用args屬性嗎? 'CustomJS(args = dict(source = source),code =「」「[...這種方式我會把參數從Python發送到JavsScript。實際上,我打算做相反的事情,從JavaScript(從外部應用程序,而不是CustomJS代碼)向Python方法發送一個參數。這就是爲什麼我用這個參數填充虛擬文本字段。有沒有更好的方法來做到這一點? – ChesuCR

+0

我測試了'trigger('change')'解決方案,但它不起作用:( – ChesuCR

+0

我也試過' window.document.Bokeh.index'解決方案,它的工作原理是這樣的:var models = window.Bokeh.index [Object.keys(window.Bokeh.index)[0]]。model.document。 _all_models; var input_dummy_text = models [dummy_text_id]; input_dummy_text.value ='new value'' – ChesuCR

相關問題