2015-09-10 76 views
4

我今天在R Shiny中爲一個複選框組實現了一個切換按鈕,並且我遇到了一些我不完全理解的有趣事情。我創建切換按鈕的第一種方法是編寫一個JavaScript腳本,用於切換複選框'checked'屬性,所以當用戶單擊按鈕時,true變爲false和false。這工作,當我跑了閃亮的應用程序,並按下切換按鈕,複選框被翻轉。但是,如果我顯示選擇,使用renderText(),閃亮對我的更改沒有反應。但是,如果我點擊其中一個複選框組,Shiny會更新爲相應的複選框。R如何知道何時更新輸入?

然後我改變了我的javascript代碼,以便不用設置checked屬性,而是使用jQuery的.click()來單擊每個複選框。這種方法正如我所希望的那樣工作,當我按下切換按鈕時,複選框被翻轉並且文本被更新。我很想知道這是爲什麼。我的懷疑是閃亮的偵聽點擊事件,但不能偵聽以編程方式更改的屬性。我的解釋並不太好,所以我創建了一個小的shinyapps app,演示了切換按鈕行爲的差異。第一個切換按鈕使用.click()並且工作,第二個使用checked屬性並且不會被動地更新。我用來演示不同的代碼如下:

ui.R

library(shiny) 

fruit = c("apple", "banana", "orange", "pear", "peach") 

shinyUI(fluidPage(
    tags$script(src = "toggle_button.js"), 

    titlePanel("Test"), 

    sidebarLayout(
    sidebarPanel(
     checkboxGroupInput("fruit_list", 
        "Select a fruit", 
        choices = fruit, 
        selected = fruit), 

     fluidRow(
     actionButton("toggleButton_1", "Toggle 1"), 
     actionButton("toggleButton_2", "Toggle 2") 
    ) 

    ), 

    mainPanel(
     textOutput("string") 
    ) 
) 
)) 

server.R

library(shiny) 

shinyServer(function(input, output) { 

    output$string <- renderText({ 
    paste(input$fruit_list, sep = ", ") 
    }) 

}) 

WWW/toggle_button.js

$(document).ready(function() { 
    $("#toggleButton_1").click(function() { 
     var fruit_boxes = $("#fruit_list :checkbox"); 

     for (var i = 0; i < fruit_boxes.length; i++) { 
      fruit_boxes[i].click(); 
     } 
    }); 

    $("#toggleButton_2").click(function() { 
     var fruit_boxes = $("#fruit_list :checkbox"); 

     for (var i = 0; i < fruit_boxes.length; i++) { 
      fruit_boxes[i].checked = !fruit_boxes[i].checked; 
     } 
    }); 
}); 

回答

3

如果」重新感興趣的是如何發光的JavaScript工作,一個很好的資源是how to build custom input objects

讀完之後,學習如何編寫一個輸入,你就會明白code for the checkbox input。請特別注意subscribe函數:它告訴javascript用「嘿,我剛更新!當「更改」事件被觸發時。所以這就是你的答案:當你手動點擊一個輸入時(或者使用jquery click獲得類似的結果)觸發change事件,但是當你簡單地手動改變該值時,事件不會被觸發。

您可以通過在更改上添加自己的回調並查看更改事件僅通過點擊觸發而不是手動更改值來測試。更進一步,這意味着您可以通過調用$(".checkbox").trigger("change")手動通知閃亮更新值。嘗試添加該行後更改值,現在它會工作(雖然我不會這樣做,這是爲了說明的目的)

+0

感謝您的迴應,這真的有幫助! Shiny的優點在於,只需使用R,不需要HTML,CSS或JavaScript就可以輕鬆使用它。最近,雖然我一直試圖在引擎蓋下仔細觀察一下,看看所有的部分是如何組合在一起的,而且這樣做很長。 – jeromefroe

+0

要做的最好的事情是從字面上通過源代碼。這聽起來可怕但可行。我分叉閃亮的回購,並在許多地方('瀏覽器()')放了很多斷點,並試圖瞭解流程,看看事情是如何工作的。這不是很容易,但有一點時間你可以得到一個好主意。 –

+0

我想我一定會盡快仔細觀察,就像你說的那樣,這不適合膽怯:) – jeromefroe

相關問題