javascript - 自定义 Shiny 输入更新 react

Question

我有一个自定义的 Shiny 输入，它是一组平衡的 slider 。我正在尝试使用 updateBalancedSliderInput，以便可以将值重置为默认值。但是，在我的应用程序中，此 updateBalancedSlider 函数不会启动任何 react 来更新输出。下面的 Javascript 和 Shiny 示例。我的假设是我只需要在我的 js 文件中添加一些东西来启动服务器端的 react 。 UI 在尝试更新平衡 slider 时更新得很好，只是没有任何输出取决于这些值的变化。任何帮助深表感谢。
Shiny

### Shiny Inputs
library(shiny)

balancedSliderInput <- function(inputId, value = 0, label = "", 
                                group = "", width = "100%") {
  
  if (label != "")
    label <- paste0('<label class="control-label" for="', inputId, '">', label, '</label>')
  
  balanced_slider_tag <- tagList(
    div(style = paste("width: ", width), class = "all-balanced-slider",
        HTML(label),
        div(id = inputId, class = paste("balanced-slider", group), as.character(value)),
        span(class = "value", "0"),
        HTML("%")
    )
  )
  
  dep <- list(
    htmltools::htmlDependency("balanced_slider", "0.0.2", c(file = "www"),
                              script = c("js/jquery-ui.min.js", "js/balancedSlider.js"),
                              stylesheet = c("css/jquery-ui.min.css")
    )
  )
  
  htmltools::attachDependencies(balanced_slider_tag, dep)
}

updateBalancedSliderInput <- function(session, inputId, value = 0) {
  message <- list(value = value)
  session$sendInputMessage(inputId, message)
}

registerInputHandler("balancedSlider", function(data, ...) {
  if (is.null(data))
    NULL
  else
    data
  
}, force = TRUE)


########## App ------ 
ui <- fixedPage(
  
  actionButton("reset", "Reset", icon = icon("undo-alt")),
  balancedSliderInput("test1", label = "Test1", value = 50),
  balancedSliderInput("test2", label = "Test2", value = 50),
  textOutput("test")
  
)

server <- function(session, input, output) {
  
  test_reactive <- reactive({
    return(input$test1)
  })
  
  output$test <- renderText({
    test <- paste("Sluder 1 is at", test_reactive()[[1]])
    return(test)
  })
  
  observeEvent(input$reset, {
    updateBalancedSliderInput(session, "test1", 50)
    updateBalancedSliderInput(session, "test2", 50)
  })
  
}

shinyApp(ui, server)

Javascript

$(function() {

    $('.balanced-slider').each(function() {
        console.log("Running Log 1")
        var init_value = parseInt($(this).text());

        $(this).siblings('.value').text(init_value);

        $(this).empty().slider({
            value: init_value,
            min: 0,
            max: 100,
            range: "max",
            step: 0.5,
            animate: 0,
            slide: function(event, ui) {
              console.log("Log 10");
                
                // Update display to current value
                $(this).siblings('.value').text(ui.value);

                // Get current total
                var total = ui.value;
                var sibling_count = 0;

                var classes = $(this).attr("class").split(/\s+/);
                var selector = ' .' + classes.join('.');
                //console.log(selector);

                var others = $(selector).not(this);
                others.each(function() {
                    total += $(this).slider("option", "value");
                    sibling_count += 1;
                });

                //console.log(total);

                var delta = total - 100;
                var remainder = 0;
                
                // Update each slider
                others.each(function() {
                    console.log("Running Log 2")
                    var t = $(this);
                    var current_value = t.slider("option", "value");

                    var new_value = current_value - delta / sibling_count;
                    
                    if (new_value < 0) {
                        remainder += new_value;
                        new_value = 0;
                    }

                    t.siblings('.value').text(new_value.toFixed(1));
                    t.slider('value', new_value);

                });


                if(remainder) {
                    var pos_val_count = 0;
                    others.each(function() {
                        if($(this).slider("option", "value") > 0)
                            pos_val_count += 1;
                    });

                    others.each(function() {
                        if($(this).slider("option", "value") > 0) {
                            var t = $(this);
                            var current_value = t.slider("option", "value");

                            var new_value = current_value + remainder / pos_val_count;

                            t.siblings('.value').text(new_value.toFixed(1));
                            t.slider('value', new_value);
                        }
                    });

                }

                
            },
            // fire the callback event for the other sliders
            stop: function(event, ui) {
                var classes = $(this).attr("class").split(/\s+/);
                var selector = '.' + classes.join('.');

                $(selector).not(this).each(function() {
                   $(this).trigger("slidestop");
                });
            }
        });
    });
});

var balancedSliderBinding = new Shiny.InputBinding();

$.extend(balancedSliderBinding, {
  find: function(scope) {
    return $(scope).find(".balanced-slider");
  },

  // The input rate limiting policy
  getRatePolicy: function() {
    return {
      // Can be 'debounce' or 'throttle'
      policy: 'debounce',
      delay: 500
    };
  },

  getType: function() {
    return "balancedSlider";
  },

  getValue: function(el) {
    var obj = {};
    obj[$(el).attr("id")] = $(el).slider("option", "value");
    return obj;
  },

  setValue: function(el, new_value) {
    $(el).slider('value', new_value);
    $(el).siblings('.value').text(new_value);

  },

  subscribe: function(el, callback) {
    $(el).on("slidestop.balancedSliderBinding", function(e) {
      callback(); // add true parameter to enable rate policy
    });
  },
  
  unsubscribe: function(el) {
    $(el).off(".balancedSliderBinding");
  },

  // Receive messages from the server.
  // Messages sent by updateUrlInput() are received by this function.
  receiveMessage: function(el, data) {
    if (data.hasOwnProperty('value'))
      this.setValue(el, data.value);

    $(el).trigger('change');
  },
});

Shiny.inputBindings.register(balancedSliderBinding, "balancedSliderBinding");

Answer 1

如果您替换 receiveMessage 中的以下行:

$(el).trigger('change');

和

$(el).trigger('slidestop');

有用。