使用ShinyJS初始化隐藏元素

问题描述 投票:0回答:1

我想在闪亮的应用程序启动时隐藏一个元素,但与此示例不同,要隐藏的元素是可见的较大元素的一部分。

在此示例中,要在开始时隐藏的元素是绘图控件,它是传单地图的一部分。 有一个按钮可以切换绘图控件的可见性 - 如何在隐藏绘图控件的情况下启动它? 该应用程序的完整代码如下。

enter image description here

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
在开始时隐藏元素,但它没有执行任何操作,大概是因为绘图控制元素在观察事件触发后加载。

javascript r shiny r-leaflet shinyjs
1个回答
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"),
  ...
© www.soinside.com 2019 - 2024. All rights reserved.