用ShinyJS集成隐藏元素

Question

当一个闪亮的应用程序启动时，我想隐藏一个元素，但是与这个例子不同的是，隐藏的元素是一个更大的元素的一部分，它是可见的。

在本例中，要隐藏在开头的元素是绘图控件，它是传单地图的一部分。有一个按钮可以切换绘图控件的可见性--如何让它从隐藏的绘图控件开始？应用程序的完整代码如下所示。

​

​

library(rbgm)
library(leaflet)
library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  leafletOutput("mymap"),
  actionBttn("toggle_button", "Toggle drawing")
)

server <- function(input, output, session) {

  output$mymap <- renderLeaflet({
    set.seed(2)
    fs <- sample(bgmfiles::bgmfiles(), 1)

    model <- boxSpatial(bgmfile(fs))
    model <- spTransform(model, "+init=epsg:4326")

    m <- leaflet() %>% addTiles() 

    m <- m %>% addPolygons(data = model, group = 'model') %>%     
      addDrawToolbar(targetGroup = 'model',
                     editOptions = editToolbarOptions(
                       selectedPathOptions = selectedPathOptions()))
    m
  })

  observe({
    shinyjs::hide(selector = "div.leaflet-draw") # <---- this doesn't hide the draw controls at the start!!
  })

  observeEvent(input$toggle_button, {
    shinyjs::toggle(selector = "div.leaflet-draw")
  })

}

shinyApp(ui, server)

我尝试在开始时使用observe隐藏元素，但是它没有做任何事情，大概是因为绘图控件元素在观察事件触发后加载。

Answer 1

你能做到的

shinyjs::delay(0, shinyjs::hide(selector = "div.leaflet-draw"))

(无观察员)。

编辑

另一种解决办法是：

js <- "
$(document).on('shiny:value', function(e){
  if(e.name === 'mymap'){
    setTimeout(function(){$('div.leaflet-draw').hide();}, 0);
  }
});
"

ui <- fluidPage(
  useShinyjs(),
  tags$head(tags$script(js)),
  leafletOutput("mymap"),
  ...