javascript - 首次加载应用程序时，根据点击事件显示小部件不起作用

Question

我下面有一个 Shiny 的仪表板，其中右侧边栏的小部件应该仅在“Plot”选项卡面板处于事件状态时显示，并且除了第一次加载应用程序之外实际上会发生这种情况当小部件也显示在'Summary' 选项卡面板中时。我知道发生这种情况是因为激活是通过单击选项卡面板名称来进行的。但我该如何解决这个问题呢？

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 tabPanel("Summary"

                 ),
                 tabPanel("Plot"
                 )), 
      tags$script(
        '$("a[data-toggle=\'tab\']").click(function(){
          Shiny.setInputValue("tabactive", $(this).data("value"))
        })'
      )
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")

      )

    ),
    title = "Right Sidebar"
  ),
  server = function(input, output) {
    output$sl<-renderUI({
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })

    observeEvent( input$tabactive , {
      if (input$tabactive == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })



  }
)

Answer 1

您可以通过将 req(input$tabactive) 添加到 renderUI 调用来抑制初始渲染:

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 tabPanel("Summary"

                 ),
                 tabPanel("Plot"
                 )), 
      tags$script(
        '$("a[data-toggle=\'tab\']").click(function(){
          Shiny.setInputValue("tabactive", $(this).data("value"))
        })'
      )
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")

      )

    ),
    title = "Right Sidebar"
  ),
  server = function(input, output) {
    output$sl <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })

    observeEvent( input$tabactive , {
      if (input$tabactive == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })
  }
)