javascript - DT:重新渲染表格后链接绑定(bind)丢失

Question

我试图通过单击嵌套在数据表中的链接导航到下一个选项卡。
起初使用 Shiny.bindAll 效果很好. Here您可以从 Joe Cheng 那里找到有关该功能使用的说明。
但是，当通过 selectInput 过滤输入数据重新呈现数据表时从 2 切换回 1 时绑定(bind)丢失:

library(shiny)
library(DT)
library(dplyr)

ui <- fluidPage(tabsetPanel(
  id = "panels",
  tabPanel("A",
           selectInput("sel", "Select", choices = c(1,2)),
           DTOutput("tab")),
  tabPanel("B",
           h3("Some information"),
           tags$li("Item 1"),
           tags$li("Item 2"),
           actionLink("goToTabPanelA", "goToTabPanelA")
  )
))

server <- function(input, output, session) {
  DF <- data.frame(a = c(1,2),
                   b = c(HTML('<a id="goToTabPanelB1" class="action-button" href="#">goToTabPanelB1</a>'),
                         HTML('<a id="goToTabPanelB2" class="action-button" href="#">goToTabPanelB2</a>')))
  
  output$tab <- renderDataTable({
    datatable(
      DF %>% filter(a %in% input$sel),
      escape = FALSE,
      selection = 'none',
      options = list(
        preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
        drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
      )
    )
  })
  
  observeEvent(c(input$goToTabPanelB1, input$goToTabPanelB2), {
    updateTabsetPanel(session, "panels", "B")
  })
  
  observeEvent(input$goToTabPanelA, {
    updateTabsetPanel(session, "panels", "A")
  })
}

shinyApp(ui, server)

Answer 1

编辑:
另一种更简洁的方法(因为它一直对链接使用相同的 id)是避免使用 dataTableProxy 重新呈现数据表。连同 replaceData :

library(shiny)
library(DT)
library(dplyr)

DF <- data.frame(id = paste0(c("goToTabPanelB1", "goToTabPanelB2")),
                 a = c(1,2),
                 b = c(HTML('<a id="goToTabPanelB1" class="action-button" href="#">goToTabPanelB1</a>'),
                       HTML('<a id="goToTabPanelB2" class="action-button" href="#">goToTabPanelB2</a>')))

ui <- fluidPage(tabsetPanel(
  id = "panels",
  tabPanel("A",
           selectInput("sel", "Select", choices = c(1,2)),
           DTOutput("tab")),
  tabPanel("B",
           h3("Some information"),
           tags$li("Item 1"),
           tags$li("Item 2"),
           actionLink("goToTabPanelA", "goToTabPanelA")
  )
))

server <- function(input, output, session) {
  
  output$tab <- renderDataTable({
    datatable(
      DF,
      escape = FALSE,
      selection = 'none',
      options = list(
        preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
        drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
      )
    )
  }, server = TRUE)
  
  tabProxy <- dataTableProxy("tab", session)
  
  observeEvent(input$sel, {
    replaceData(tabProxy, data = DF[input$sel,])
  })
  
  observeEvent(c(input$goToTabPanelB1, input$goToTabPanelB2), {
    updateTabsetPanel(session, "panels", "B")
  })
  
  observeEvent(input$goToTabPanelA, {
    updateTabsetPanel(session, "panels", "A")
  })
}

shinyApp(ui, server)

初步回答 :
一种可能的解决方法是在重新渲染数据表时为链接(a-tags)提供新的 id(参见下面的代码)。
我仍然想了解如果 id 是静态的并且数据表得到重新渲染(因此我提供了赏金)会发生什么。
该问题似乎与所描述的 here 类似。 .

library(shiny)
library(DT)
library(dplyr)

ui <- fluidPage(tabsetPanel(
  id = "panels",
  tabPanel("A",
           selectInput("sel", "Select", choices = c(1,2)),
           DTOutput("tab")),
  tabPanel("B",
           h3("Some information"),
           tags$li("Item 1"),
           tags$li("Item 2"),
           actionLink("goToTabPanelA", "goToTabPanelA")
  )
))

server <- function(input, output, session) {
  DF <- reactive({
    # force id to update
    tmpId <- as.integer(Sys.time())
    tmpDF <- data.frame(id = paste0(c("goToTabPanelB1", "goToTabPanelB2"), tmpId),
               a = c(1,2),
               b = c(HTML(sprintf('<a id="goToTabPanelB1%s" class="action-button" href="#">goToTabPanelB1</a>', tmpId)),
                     HTML(sprintf('<a id="goToTabPanelB2%s" class="action-button" href="#">goToTabPanelB2</a>', tmpId))))
    
    tmpDF[input$sel,]
    })
  
  output$tab <- renderDataTable({
    datatable(
      DF(),
      escape = FALSE,
      selection = 'none',
      options = list(
        preDrawCallback = JS('function() { Shiny.unbindAll(this.api().table().node()); }'),
        drawCallback = JS('function() { Shiny.bindAll(this.api().table().node()); } ')
      )
    )
  }, server = FALSE)
  
  observeEvent(lapply(DF()$id, function(x){input[[x]]}), {
    updateTabsetPanel(session, "panels", "B")
  })
  
  observeEvent(input$goToTabPanelA, {
    updateTabsetPanel(session, "panels", "A")
  })
}

shinyApp(ui, server)

相关链接:

Trouble with reactivity when binding/unbinding DataTable

https://github.com/rstudio/shiny/issues/1246

Text Input in DT::datatable unbinds and I can't rebind it