使用 ShinyJS 初始化隐藏元素

Question

我想在闪亮的应用程序启动时隐藏一个元素，但与 this example 不同的是，要隐藏的元素是一个更大的可见元素的一部分。

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

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"),
  ...

使用 ShinyJS 初始化隐藏元素

Initalising hidden elements with ShinyJS

javascript

r

shiny

leaflet

shinyjs

编辑