R Shiny: Shiny.onInputChange работает с переключателем данных

Question

Я собираюсь создать простой маршрутизатор для моего блестящего приложения. Вот пример:

library(shiny)

ui <- fluidPage(
  uiOutput("landingPage"),
  tags$script(HTML(
    '$(document.body).on("click", "[navto]",
    function (e) {
      Shiny.onInputChange("navigateTo", $(e.currentTarget).attr("navto"));
    });'
  ))
)

server <- function(input, output) {
  output$landingPage <- renderUI({
    print(paste("Landing ", input$navigateTo))
    toOut <- pageSplashUI()
    return(toOut)
  })
}

pageSplashUI <- function() {
  tags$a(href="", navto="GotoNavPage-2", "GotoNavPage-2")
}

# Run the application 
shinyApp(ui = ui, server = server)

Однако output$landingPage обновлялось дважды с двумя различными значениями input$navigateTo после нажатия на ссылку href, первый раз - ожидаемое " GotoNavPage-2 ", а второй раз равен NULL .

Поработав некоторое время, я обнаружил, что проблему можно решить, добавив data-toggle` = "tab" в href. Единственное изменение следующее:

От:

tags$a(href="",  navto="GotoNavPage-2", "GotoNavPage-2")

Кому:

tags$a(href="", `data-toggle`="tab", navto="GotoNavPage-2", "GotoNavPage-2")

Теперь программа работает, как и ожидалось:

Я просто не понимаю, почему изменения вступают в силу? Какая польза от data-toggle = "табуляция" ?

Answer 1

Вы видите, что страница обновляется каждый раз, когда вы нажимаете на ссылку. Это так просто!

Это будет очевидно, если вы добавите текстовый ввод в пользовательский интерфейс. Введите текст в поле ввода, затем нажмите на ссылку, и вы увидите, что страница обновляется.

Итак, это последовательность событий:

1. Приложение запускается, ввод NULL, поэтому вы видите «Landing»
2. Вы нажимаете на ссылку, поэтому вход получает значение, и вы видите «Landing GotoNavPage-2»
3. Поскольку ссылка была нажата, страница обновилась
4. Приложение запускается снова (обновляется), поэтому снова вы видите «Посадка»

Когда вы добавляете data-toggle="tab" (или любое другое возможное значение в начальной загрузке), JavaScript-код Bootstrap имеет некоторые ловушки, которые, когда вы нажимаете на ссылку с этим специальным атрибутом, игнорируются как ссылка, поэтому вы не вижу, что это происходит тогда.

Вы можете просто изменить href с "" на "#", что не приведет к обновлению страницы

Честно говоря, мне не сразу было понятно, что это происходит. Сначала я потратил 5 минут на то, чтобы понять, почему это происходит, пока не понял, что медленно отлаживаю, чтобы заметить это.