如何将动态变量从服务器传递到UI？

Question

我有一个闪亮的小应用程序：

library(shiny)

ui <- fluidPage(
#htmlOutput("d"),
tags$p(id = 'g', class =  'newClass',  'This is a paragraph'),tags$p(id = "demo"),
tags$script(HTML("var tit = document.getElementById('g');tit.onclick = function (){document.getElementById('demo').innerHTML  = Date()}"))
)

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

}

shinyApp(ui, server)

此应用程序使用 JavaScript。当用户单击该句子时，会显示日期。但日期是在 UI 部分本身传递的。

我的问题是，我们可以不在这里将变量从服务器传递到 UI 吗？例如， 我们在服务器部分创建

Var1 <- Sys.Date()

。现在我需要将 Var1 传递给 UI 来代替

Date()

。可以吗？

Answer 1

可以将动态变量从服务器传递到 UI。

使用runjs

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  tags$p(id = 'g', class =  'newClass',  'This is a paragraph'),tags$p(id = "demo"),
  tags$script(HTML("var tit = document.getElementById('g');tit.onclick = function (){document.getElementById('demo').innerHTML  = Date()}")),
  actionButton("btn",
               "data from server"
  )
  
)

server <- function(input, output, session) {
  
  observeEvent(input$btn, {
    if (!(is.null(input$btn)) &   input$btn >0 ) {
      runjs("document.getElementById('demo').innerHTML  = 'hello from server'")
    }
    
    
  }, ignoreInit = TRUE)
  
  
}

shinyApp(ui, server)

使用 R

session$sendCustomMessage

和 js

Shiny.addCustomMessageHandler

library(shiny)
library(shinyjs)

ui <- fluidPage(
  tags$head(
    tags$script('Shiny.addCustomMessageHandler("bla",
  function(message) {
    document.getElementById("demo").innerHTML  = message
  }
);
   ')
  ),
  tags$p(id = 'g', class =  'newClass',  'This is a paragraph'),tags$p(id = "demo"),
  tags$script(HTML("var tit = document.getElementById('g');tit.onclick = function (){document.getElementById('demo').innerHTML  = Date()}")),
  actionButton("btn",
               "data from server"
  )
  
)

server <- function(input, output, session) {
  
  observeEvent(input$btn, {
    if (!(is.null(input$btn)) &   input$btn >0 ) {
      session$sendCustomMessage(type = 'bla',
                                message =  'hello from server')
    }
    
    
  }, ignoreInit = TRUE)
  
  
}

shinyApp(ui, server)

另请阅读

• https://shiny.posit.co/r/articles/build/communicating-with-js
• https://shiny.posit.co/r/articles/build/js-events/特别是在某些情况下需要

  $(document).on('shiny:connected', function(event) { ... });

  当页面部分加载但Shiny尚未加载时。