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

Question

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

1

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

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.

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

От:

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

Для того, чтобы:

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

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

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

Liang 30 окт. 2018, в 04:15

Источник

Теги:

javascript

r

shiny

1 ответ

Ещё вопросы

Dean Attali · Accepted Answer · 2018-10-30T03-02-00.000Z

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

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

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

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

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

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

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