个人中心
gpt4 book ai didi

javascript - 为使用模块命名空间的 R Shiny 模块编写自定义 JavaScript 的最佳方法是什么？

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:24:53 29 4
gpt4 key购买 nike

<分区>

我有一个复杂的 Shiny 应用程序，需要使用自定义 JavaScript 代码。该应用程序由在具有不同 namespace 的多个位置调用的模块组成。我需要将一些 JavaScript 代码与 R 代码一起“模块化”，即使用模块 namespace 。我能够通过创建包含 JS 代码的自定义字符串并使用 shinyjs::runjs() 函数(下面的示例)执行它来使其工作。对于给定的示例，这是一个公平的解决方案。然而，将更复杂的超过一百行的 JavaScript 代码放入一个粘贴有标识符的字符串中似乎很容易出错并且不是最佳解决方案(缺乏突出显示，痛苦的格式化等)。有没有更好的方法达到同样的效果？

library(shiny)
library(shinyJS)

myModuleUI <- function(id) {
    ns <- NS(id)

    tagList(
        div(id = ns("clickableElement"), class = "btn btn-primary", "Click Me"),
        div(id = ns("highlightableElement"), "This (and only this!) text should be highlighted on click")
    )
}

myModule <-  function(input, output, session) {

    ns <- session$ns

    shinyjs::runjs(paste0("
        $('#", ns("clickableElement"), "').click(function() {
            $('#", ns("highlightableElement"), "').css('background', 'yellow');
        })   
    "))
}

ui <- fluidPage(
    useShinyjs(),
    tabsetPanel(
        tabPanel(
            "Instance 1",
            myModuleUI("one")
        ),
        tabPanel(
            "Instance 2",
            myModuleUI("two")
        )
    )
)

server <- function(input, output) {
    callModule(myModule, "one")
    callModule(myModule, "two")
}

shinyApp(ui = ui, server = server)

更新

为了将来引用，我决定分享我最终实现的解决方案。我最终为每个模块创建了一个 JS 文件，其中包含一个将命名空间作为唯一参数的函数。此函数使用此命名空间创建所有需要的对象和绑定(bind)。然后，我在模块的开头使用 shinyjs 调用该单个函数。这让我可以将 JS 代码保存在一个单独的文件中，这样可以解决最初的问题并使代码易于管理(尤其是当您有大量 JS 代码时)。

app.R

library(shiny)
library(shinyjs)

myModuleUI <- function(id) {
    ns <- NS(id)

    tagList(
        div(id = ns("clickableElement"), class = "btn btn-primary", "Click Me"),
        div(id = ns("highlightableElement"), "This (and only this!) text should be highlighted on click")
    )
}

myModule <-  function(input, output, session) {

    ns <- session$ns

    shinyjs::runjs(paste0("myModuleJS('", ns(""), "');"))
}

ui <- fluidPage(
    useShinyjs(),
    tags$head(
        tags$script(src = "myModuleJS.js")
    ),
    tabsetPanel(
        tabPanel(
            "Instance 1",
            myModuleUI("one")
        ),
        tabPanel(
            "Instance 2",
            myModuleUI("two")
        )
    )
)

server <- function(input, output) {
    callModule(myModule, "one")
    callModule(myModule, "two")
}

shinyApp(ui = ui, server = server)

www/myModuleJS.js

function myModuleJS(ns) {
    $('#' + ns + 'clickableElement').click(function() {
        $('#' + ns + 'highlightableElement').css('background', 'yellow');
    });
}

29 4 0
文章推荐： javascript - 使用和不使用 new() 预先实例化它们来导出 ES6 类
文章推荐： javascript - 根据其实现在不同的浏览器版本上使用 Notification.requestPermission
文章推荐： javascript - 处理 reactjs .reduce 中的空值
文章推荐： javascript - ChartJs 不显示数据
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com