I am reading through Shiny's official articles to improve my Shiny skill. I came across this article about adding new UI elements in Shiny using JavaScript: https://shiny.rstudio.com/articles/dynamic-ui.html
In the last example, it is mentioned that it is best practice to use Shiny.bindall() and Shiny.unbindall() but I cannot seems to find the reason why we need these commands. I tried copying the codes and comment out these commands, but the app still work fine.
Please let me know why do we need to do bindall() and unbindall()?
In most web applications (Shiny or otherwise), the HTML markup and all CSS/JS assets are loaded more or less at the same time, and then an onLoad/onDOMReady event is fired, which is the signal for all the JS-driven components to go look for instances of themselves on the page and run initialization code, attach event handlers, etc. In the case of Shiny, such logic instantiates fancy selectize.js controls for selectInput, fancy ion rangesliders for sliderInput, and for all inputs/outputs whether or simple or fancy, tells Shiny of the existence of these inputs/outputs.
When the HTML markup is modified so that inputs/outputs are either added or removed, this kind of logic needs to run again, or else removed outputs will still be considered on the page and new inputs/outputs won't be initialized and hooked up to Shiny. We call this process "binding", and when you modify the HTML using our built-in functions like uiOutput/renderUI, insertUI/removeUI, etc., we call Shiny.bindAll()/unbindAll() automatically. But if you modify the HTML at runtime using your own JavaScript, you have to explicitly invoke these functions yourself.
If your question's been answered, would you mind choosing a solution? It helps other people see which questions still need help, or find solutions if they have similar problems. Here’s how to do it: