9

问题

在动态创建 ui-elements ( shiny.tag, shiny.tag.list, ...) 时，我经常发现很难将其与我的代码逻辑分开，并且通常会以嵌套tags$div(...)、循环和条件语句的混杂而告终。虽然看起来很烦人而且很难看，但它也很容易出错，例如在更改 html 模板时。

可重现的例子

假设我有以下数据结构：

my_data <- list(
  container_a = list(
    color = "orange",
    height = 100,
    content = list(
      vec_a = c(type = "p", value = "impeach"),
      vec_b = c(type = "h1", value = "orange")
    )
  ),
  container_b = list(
    color = "yellow",
    height = 50,
    content = list(
      vec_a = c(type = "p", value = "tool")
    )
  )  
)

如果我现在想将此结构推送到 ui-tags 中，我通常会得到如下结果：

library(shiny)

my_ui <- tagList(
  tags$div(
    style = "height: 400px; background-color: lightblue;",
    lapply(my_data, function(x){
      tags$div(
        style = paste0("height: ", x$height, "px; background-color: ", x$color, ";"),
        lapply(x$content, function(y){
          if (y[["type"]] == "h1") {
            tags$h1(y[["value"]])
          } else if (y[["type"]] == "p") {
            tags$p(y[["value"]])
          }
        }) 
      )
    })
  )
)

server <- function(input, output) {}
shinyApp(my_ui, server)

如您所见，与我的真实示例相比，这已经很混乱了。

所需的解决方案

我希望找到接近R模板引擎的东西，这将允许分别定义模板和数据：

# syntax, borrowed from handlebars.js
my_template <- tagList(
  tags$div(
    style = "height: 400px; background-color: lightblue;",
    "{{#each my_data}}",
    tags$div(
      style = "height: {{this.height}}px; background-color: {{this.color}};",
      "{{#each this.content}}",
      "{{#if this.content.type.h1}}",
      tags$h1("this.content.type.h1.value"),
      "{{else}}",
      tags$p(("this.content.type.p.value")),
      "{{/if}}",      
      "{{/each}}"
    ),
    "{{/each}}"
  )
)

以前的尝试

首先，我认为这shiny::htmlTemplate()可以提供一个解决方案，但这仅适用于文件和文本字符串，而不适用于shiny.tags。我还查看了一些 r-packages，比如whisker ，但它们似乎有相同的限制并且不支持标签或列表结构。

谢谢！

4

2 回答 2

2

我喜欢使用生成闪亮 HTML 标签（或htmltools标签）的函数来创建可组合和可重用的 UI 元素。从您的示例应用程序中，我可以识别一个“页面”元素，然后是两个通用内容容器，然后为它们创建一些函数：

library(shiny)

my_page <- function(...) {
  div(style = "height: 400px; background-color: lightblue;", ...)
}

my_content <- function(..., height = NULL, color = NULL) {
  style <- paste(c(
    sprintf("height: %spx", height),
    sprintf("background-color: %s", color)
  ), collapse = "; ")

  div(style = style, ...)
}

然后我可以用这样的东西组成我的用户界面：

my_ui <- my_page(
  my_content(
    p("impeach"),
    h1("orange"),
    color = "orange",
    height = 100
  ),
  my_content(
    p("tool"),
    color = "yellow",
    height = 50
  )
)

server <- function(input, output) {}
shinyApp(my_ui, server)

每当我需要调整元素的样式或 HTML 时，我都会直接使用生成该元素的函数。

此外，在这种情况下，我刚刚内联了数据。我认为您示例中的数据结构确实将数据与 UI 问题（样式、HTML 标签）混合在一起，这可能解释了一些令人费解的问题。我看到的唯一数据是“橙色”作为标题，“弹劾”/“工具”作为内容。

如果您有更复杂的数据或需要更具体的 UI 组件，您可以再次使用构建块之类的函数：

my_content_card <- function(title = "", content = "") {
  my_content(
    h1(title),
    p(content),
    color = "orange",
    height = 100
  )
}

my_ui <- my_page(
  my_content_card(title = "impeach", content = "orange"),
  my_content(
    p("tool"),
    color = "yellow",
    height = 50
  )
)

希望有帮助。如果您正在寻找更好的示例，您可以查看 Shiny 的输入和输出元素（例如selectInput()）背后的源代码，它们本质上是输出 HTML 标记的函数。模板引擎也可以工作，但是当您已经拥有htmltools+ R 的全部功能时，就没有真正的需要了。

于 2019-11-28T18:06:58.147 回答
1

也许您可以考虑研究glue()and get()。

得到（）：

get()可以将字符串转换为变量/对象。

所以你可以缩短：

if (y[["type"]] == "h1") {
    tags$h1(y[["value"]])
} else if (y[["type"]] == "p") {
    tags$p(y[["value"]])
}

至

get(y$type)(y$value)

（见下面的例子）。

胶水（）：

glue()提供了一个替代方案paste0()。如果您将大量字符串和变量集中到一个字符串中，它可能更具可读性。我认为它看起来也接近您想要的结果的语法。

代替：

paste0("height: ", x$height, "px; background-color: ", x$color, ";")

你会写：

glue("height:{x$height}px; background-color:{x$color};")

您的示例将简化为：

tagList(
  tags$div(style = "height: 400px; background-color: lightblue;",
    lapply(my_data, function(x){
      tags$div(style = glue("height:{x$height}px; background-color:{x$color};"),
        lapply(x$content, function(y){get(y$type)(y$value)}) 
      )
    })
  )
)

使用：

library(glue)
my_data <- list(
  container_a = list(
    color = "orange",
    height = 100,
    content = list(
      vec_a = list(type = "p", value = "impeach"),
      vec_b = list(type = "h1", value = "orange")
    )
  ),
  container_b = list(
    color = "yellow",
    height = 50,
    content = list(
      vec_a = list(type = "p", value = "tool")
    )
  )  
)

备择方案：

我认为 htmltemplate 是个好主意，但另一个问题是不需要的空格：https ://github.com/rstudio/htmltools/issues/19#issuecomment-252957684 。

于 2019-11-30T00:52:44.650 回答