r - 在 Shiny 的 HTML 中嵌入 R 变量

Question

下面是三个文件来说明我的问题和我的程序的结构方式。我想要做的是使用引导卡并在其中放置一个 R 变量(例如，某些计算的结果)。有没有一种方法可以在单独的文档中使用 HTML 来做到这一点？

例如，假设myVariable <- 2^2是在服务器文件中完成的，我希望对象 myVariable 中的计算结果位于我表示为“放置 R 变量”的卡内。

感谢您的意见或建议。

一个简单的ui.R文件

ui <- fluidPage(
navbarPage(
theme = bs_theme(bootswatch = "flatly"),
title = 'Methods',
tabPanel('One'),
),
mainPanel(
h1('Hello World'),  
includeHTML("foo.html")
)
)

一个基本的server.R文件

library(shiny)
library(bslib)
server <- function(input, output) {
}

foo.HTML 的内容

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">I want to put an R variable here</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Answer 1

由于卡片来自您的自定义 HTML，而不是来自 Shiny 或其他 Shiny 扩展包的标准卡片组件。我们可以使用 shinyjs 包将变量发送到 UI 并运行一些简单的 Javascript 来更新值。

library(shiny)
library(bslib)
library(shinyjs)
ui <- fluidPage(
    useShinyjs(),
    navbarPage(
        theme = bs_theme(bootswatch = "flatly"),
        title = 'Methods',
        tabPanel('One'),
    ),
    mainPanel(
        h1('Hello World'),  
        HTML(
            '
            <div class="card text-center">
              <div class="card-header">
                Featured
              </div>
              <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p id="mycard" class="card-text">I want to put an R variable here</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
              <div class="card-footer text-muted">
                2 days ago
              </div>
            </div>
            '
        )
    )
)

library(shiny)
library(bslib)
server <- function(input, output) {
    observe({
        myVariable <- 2^2
        runjs(paste0('$("#mycard").text("', myVariable, '")'))
    })
}

shinyApp(ui, server)

1. 我为卡 mycard 添加了一个 ID，以便我可以轻松地使用 JS 选择。
2. 为了便于复现，我把你的foo.html改成了HTML()标签，一样的，你可以继续使用你的foo .html，但记得将 id="mycard" 添加到卡片中。
3. 所以这里你没有告诉我们在什么情况下触发更新，所以我直接从服务器计算值并在开始时发送到 UI 更新。根据您的实际情况进行更改。