RStudio Shiny и проблема связи с JavaScript

Question

Я хотел бы сделать приложение Shiny, которое делает как можно больше объектов HTML div как длину выбранной базы данных, но может возникнуть проблема связи между Shiny и JavaScript.

Я попытался использовать Shiny.addCustomMessageHandler, но, похоже, только отправляет информацию внутри функции. Моя цель состоит в том, чтобы изменить значение переменной ГЗС Ncol (база данных())

Вот минимальный пример:

server.r

library(shiny) 

shinyServer(
function(input, output, session) { 
    database <- reactive({ 
     get(input$database) 
    }) 

    observe({ 
    session$sendCustomMessage(type = 'testmessage', message = ncol(database())) 
    }) 
}) 

ui.r

library(shiny) 

shinyUI(fluidPage(
    tags$head(tags$script(src="script.js")), 

    fluidRow(
    # TITLE 
    titlePanel("title"), 

    # SIDEBAR 
    sidebarPanel(width = 2, 
     selectInput("database", "Select sample database:", choices = c("mtcars","iris","Titanic","AirPassengers")) 
    ) 
), 

    # MAIN-PANEL 
    column(width = 8, 
    tabsetPanel(type = "pills", 
     tabPanel("view",   
      tags$div(id="target") 
     ) 
)) 
)) 

script.js

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

      var msg; 
      Shiny.addCustomMessageHandler("testmessage", 
       function(message) { 
       msg = message;          
       } 
      ); 

      for(var i =1; i<= msg; i++){ 
      $('#target').append($('<div/>', { id: 'targ' + i, 'class' : 'col-md-4'})) 
      } 
}); 

Спасибо за любое предложение!

Update1:

Когда я генерирует участки, как это:

$(document).ready(function() { 
    Shiny.addCustomMessageHandler("testmessage", 
    function(message) { 
     updateTargetDiv(message); 
    } 
    ); 
}); 

function updateTargetDiv(msg){ 
     node = document.getElementById('target'); 
     while (node.hasChildNodes()) { 
      node.removeChild(node.lastChild); 
     } 
     for(var i =1; i<= msg; i++){ 
     $('#target').append($('<div/>', { id: 'targ' + i, 'class' : 'col-md-4'})); 
     } 

      for(var i =1; i<= msg; i++){ 
       $('#targ' + i).append($('<div/>', { id: 'plot' + i, 'class' : 'col-md-3 shiny-plot-output'})) 
       $('#targ' + i).append($('<div/>', { id: 'summary' + i, 'class' : 'col-md-1 shiny-html-output'})) 
      } 
} 

server.r

observe({ 
     for (i in 1:ncol(database())) { 
     local({ 
      my_i = i 
      output[[paste0('plot',i)]] <- renderPlot({ 
       db = database() 
       ggplot(data = db, 
        aes_string(colnames(db)[my_i])) + 
       geom_histogram() 
      }) 

      output[[paste0('summary',i)]] <- renderTable({ 
       db = database() 
       mat = matrix(NA,6,2) 
       mat[,1] = names(summary(db[,my_i])) 
       mat[,2] = summary(db[,my_i]) 
       mat 
      }, include.colnames=FALSE) 
     }) 
     } 
    }) 

Я не могу себе каких-либо участков. Зачем? (Он работает без сценария JavaScript динамического div)

Answer 1

Основываясь на вашем описании, я думаю, что основная проблема заключается в том, что вы вызываете функцию JavaScript только один раз. .on('shiny:connected' ... вызывается только один раз в начале.

Еще одна проблема заключается в том, что вы только добавляете цель div, поэтому она будет продолжать расти, если вы не очистите ее дочерние элементы div.

Я думаю, код ниже подходит именно вам. Он создает CustomMessageHandler один раз и будет вызывать updateTargetDiv в любое время при передаче нового значения. Он также очищает дочерние элементы div от цели, прежде чем создавать новые.

$(document).ready(function() { 
    Shiny.addCustomMessageHandler("testmessage", 
    function(message) { 
     updateTargetDiv(message); 
    } 
); 
}); 

function updateTargetDiv(msg){ 
     node = document.getElementById('target'); 
     while (node.hasChildNodes()) { 
      node.removeChild(node.lastChild); 
     } 
     for(var i =1; i<= msg; i++){ 
     $('#target').append($('<div/>', { id: 'targ' + i, 'class' : 'col-md-4'})); 
     } 
} 

Визуальная: