У меня есть пользовательский интерфейс HTML для моего приложения Shiny.Пользовательский интерфейс опирается на некоторые данные JSON.Я написал сценарий R для создания файла JSON, который, кажется, работает отлично.Я сделал test.json, чтобы помочь выложить остальную часть пользовательского интерфейса.Когда пользователь нажимает кнопку в пользовательском интерфейсе, я хочу запустить скрипт, чтобы создать новый файл JSON, из которого будут созданы данные, которые будут отображаться в приложении.Скрипт для создания JSON и HTML / JavaScript / CSS для пользовательского интерфейса прекрасно работает, когда нет в приложении Shiny.Я убедился, что кнопка регистрирует щелчок в приложении Shiny, но он не перезапускает скрипт и не обновляет отображаемый пользовательский интерфейс.
Это файл app.R, который у меня есть:
ui = htmlTemplate(
"www/index.html",
styleInfo = includeCSS("www/style.css"),
button = actionButton("btn", "Click me!"),
scriptInfo = includeScript("www/index.js")
)
server = function(input, output, session){
observeEvent(input$btn, {
message("Clicked\n")
function_to_change_json_here()
})
}
Вот файл index.html, используемый при вызове приложения к htmlTemplate().Он находится в подкаталоге www/ папки, содержащей app.R.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
{{styleInfo}}
</head>
<body>
<header class="top-banner">
<div class="top-banner-wrap">
<p class="intro" id="intro"></p>
<h1 id="headline">Some Content</h1>
<p class="year"> 2019 </p>
<p id="foo">bar</p>
{{button}}
</div>
</header>
<section>
<div class="container">
<ul class="matchup">
<li class="team team-top">
<span class="seed" id="r1-seed-1-seed"></span>
<img class="logo" id="r1-seed-1-logo">
<span id="r1-seed-1-name"></span>
<span class="score"></span>
</li>
<li class="team team-bottom">
<span class="seed" id="r1-seed-16-seed"></span>
<img class="logo" id="r1-seed-16-logo">
<span id="r1-seed-16-name"></span>
<span class="score"></span>
</li>
</ul>
</div>
</section>
<script src="index.js"></script>
</body>
Вот www/style.css:
.team{
color: red;
}
.logo{
height: 50px;
}
И, наконец, www/index.js:
var jsonObj = {
"r1": [
{
"team_name": "Bulldogs",
"team_seed": 1,
"logo_link": "https://images-na.ssl-images-amazon.com/images/I/61eSjtcXNVL._SX355_.jpg"
}
],
"r2": [
{
"team_name": "Wildcats",
"team_seed": 16,
"logo_link": "https://i0.wp.com/www.stickertalk.com/wp-content/uploads/2015/11/833__68393.1440207109.1280.1280.jpg?fit=1280%2C1000&ssl=1"
}
]
};
document.getElementById("r1-seed-1-name").innerHTML = jsonObj.r1[0].team_name;
document.getElementById("r1-seed-1-logo").src = jsonObj.r1[0].logo_link;
document.getElementById("r1-seed-1-seed").innerHTML = jsonObj.r1[0].team_seed;
document.getElementById("r1-seed-16-name").innerHTML = jsonObj.r2[0].team_name;
document.getElementById("r1-seed-16-logo").src = jsonObj.r2[0].logo_link;
document.getElementById("r1-seed-16-seed").innerHTML = jsonObj.r2[0].team_seed;
Компоненты HTML, CSS и JavaScript работают отлично.function_to_change_json_here(), который я написал в R, также прекрасно работает сам по себе, но измененный JSON не отображается в пользовательском интерфейсе после нажатия кнопки или даже после использования session$reload().Я уверен, что кнопка регистрирует щелчок, так как «Clicked» все еще передается в консоли R.У меня также было function_to_change_json_here() переписать весь файл www/index.js, который затем вызывается, но ничего в пользовательском интерфейсе не меняется.