我正在尝试建立一个闪亮的 Jmeter 板与menuSubItems，应该对应于TabPanels。我还需要一个按钮，在主页上移动到这些TabPanels。这一部分是不是工作得很糟糕。问题来了，当我试图使用一些JavaScript代码来更新哪些是'活动'的项目在侧边栏（以下可重现的例子）。
我的主要问题如下：
1.我无法在侧边栏中将正确的menuSubItem设置为“active”：在js控制台中，我看到<li>项被正确选择，但由于未知原因，classList.add('active');（或remove）仍然无效。
1.当我从“Tabpan”menuSubItems切换到Home或Settings时，我希望“Tab 1”menuItem折叠起来;在这里，我也尝试过用js（将类更新为style.display = 'none';）来折叠;有时它能工作，有时它不能工作（如果它总是工作或不工作，会更容易理解...）。
1.有些“随机”行为我不理解。Tabpan 1和Tabpan 2（以及它们对应的observeEvent）是以完全相同的方式构建的（使用lapply），但Tabpan 2似乎比Tabpan 1工作得更好。此外，有时从Tabpan 1切换到设置会起作用，有时则不会。
如何调试以下应用程序？
require(shiny)
require(shinyjs)
require(shinydashboard)
require(shinydashboardPlus)
mymenu <- list(list(menuitem=c("Tab1" = "tab1"),
subitems=c("Tabpan1" = "tsp1_tabpan1", "Tapan2"="tsp1_tabpan2"),
icon="upload"))
build_menu <- function(list_item){
lapply(list_item, function(x){
subs <- x[["subitems"]]
men <- x[["menuitem"]]
menusubits <- lapply(seq_along(subs), function(i){
HTML(paste0('<li><a id="mv_',men,'_',subs[i] , '" href="#shiny-tab-',men ,'" class="action-button" data-value="',men,'">
<i class="fas fa-angles-right" role="presentation" aria-label="angles-right icon"></i> ', names(subs)[i],'</a></li>'))
})
menuItem(names(men), id=as.character(men), icon = icon(x[["icon"]]),menusubits)
})
}
ui <- dashboardPage(
dashboardHeader(title = ""),
dashboardSidebar(
sidebarMenu(id="sidebar",
menuItem("Accueil",tabName = "home", icon = icon("igloo")),
build_menu(mymenu),
menuItem("Réglages", tabName = "settings", icon = icon("gears"))
)),
dashboardBody(
useShinyjs(),
tabItems(
tabItem(tabName = "home",
h1("Home"),
HTML('<br><br><ul><li><a id="see_tab1_pan1" class="action-button" >
Go to tab1 pan1</a></li><br><br>
<li><a id="see_tab1_pan2" class="action-button" >
Go to tab1 pan2</a></li>'),),
tabItem(tabName = "tab1",
h1("Tab1"),
tabsetPanel(id="tab1_tabset",
tabPanel("TabPan1", value=paste0("tab1_tsp1_tabpan1"),
h4("tp tit1")
),
tabPanel("TabPan2", value=paste0("tab1_tsp1_tabpan2"),
h4("tp tit2")
),)),
tabItem(tabName = "settings",
h1("Settings")
))))
server = function(input, output, session) {
observeEvent(input$see_tab1_pan1,{
cat(paste0("click_test\n"))
# debug see_tab1_pan2 first :-)
})
observeEvent(input$see_tab1_pan2,{
cat(paste0("click_test\n"))
runjs(paste0(
# emulate a click on menusubitem :
"var x = document.getElementById('", "mv_tab1_tsp1_tabpan2", "'); ",
"console.log(x);",
"x.click();",
# "// leaving Home -> remove active class ",
"const $parent = $('.sidebar-menu [data-value=\"home\"]').closest('li');",
"console.log('parent');",
"console.log($parent);",
"$parent.removeClass('active');",
#"// expand the correspondign menuitem
"var y = document.getElementById('", "tab1", "'); ",
"console.log('y');",
"console.log(y);",
"y.style.display = 'block';",
"y.classList.add('menu-open');"#,
))})
### collapse menuitems if I am in home or settings
observe({
if(input$sidebar == "home" | input$sidebar == "settings"){
#"// collapse the tab1 menuitem
runjs(paste0("var y = document.getElementById('", "tab1", "'); ",
"console.log('y');",
"console.log(y);",
"y.style.display = 'none';",
"y.classList.remove('menu-open');"#,
))
}
})
lapply(mymenu, function(x){
men <- as.character(x[["menuitem"]])
stopifnot(length(men) == 1)
subits <- x[["subitems"]]
lapply(seq_along(subits), function(i){
btnid <- paste0("mv_", men, "_", subits[i])
observeEvent(input[[btnid]],{
cat( paste0("click ",btnid,"\n") )
updateTabItems(session, "sidebar", selected = men)
updateTabItems(session, inputId = paste0(men, "_tabset"),
selected = paste0(men, "_", subits[i]))
runjs(paste0(
#"// find all other <li> elements of the menuitem and remove active class",
"var btn = document.getElementById('", btnid, "');",
"console.log('btn');",
"console.log(btn);",
"var allLi = btn.closest('ul').getElementsByTagName('li');",
" for (var i = 0; i < allLi.length; i++) {",
"console.log('allLi[i] - BEFORE');",
"console.log(allLi[i]);",
" allLi[i].classList.remove('active');", #### NOT WORKING ????
"console.log('allLi[i] - AFTER');",
"console.log(allLi[i]);",
"}" ,
# "// add 'active' class to <li> of the corresponding menusubitem button ",
"var z = btn.closest('li');",
"console.log('will add active to');",
"console.log(z);",
" z.classList.add('active');",
" console.log('after set active class');", #### NOT WORKING ????
"console.log(z);"
))
}
)})})}
shinyApp(ui, server)字符串
1条答案
按热度按时间shstlldc1#
我找到了以下的变通方法，但我发现它一点也不干净，还在等待更好的答案.
字符串
我还在纠结这一部分
型
（转载自this other SO question）