javascript - 自定义小部件的 react 性

Question

我需要一个垂直 slider 输入。由于内置的​​ sliderInput 函数无法做到这一点，因此我选择自己实现。根据this thread可以 (I) 使用 CSS 旋转 sliderInput 小部件或 (II) 使用通用 slider 并实现与 Shiny 交互的功能。我决定选择选项 (II)，因为 (I) 没有按照我想要的方式进行。

我关注了this article为了实现自定义的 verticalSlider 函数

verticalSlider <- function(inputId, min, max, value) {
  tagList(
    singleton(tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.min.css"))),
    singleton(tags$head(tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.min.js"))),

    singleton(tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "css/verticalSlider.css"))),
    singleton(tags$head(tags$script(src = "js/verticalSlider.js"))),

    tags$input(id = inputId,
               class = "verticalSlider",
               type = "text",
               value = "",
               `data-slider-min` = as.character(min),
               `data-slider-max` = as.character(max),
               `data-slider-step` = as.character(1),
               `data-slider-value` = as.character(min),
               `data-slider-orientation` = "vertical"
    )
  )
}

我在“js/verticalSlider.js”中实现了输入绑定(bind)并初始化了 slider 。

$(function() {
  $('.verticalSlider').each(function() {
      $(this).slider({
        reversed : true,
        handle : 'square',
        change: function(event, ui){}
     });
    });
});

var verticalSliderBinding = new Shiny.InputBinding();
  $.extend(verticalSliderBinding, {
    find: function(scope) {
      return $(scope).find(".verticalSlider");
  },
  getValue: function(el) {
    return $(el).value;
  },
  setValue: function(el, val) {
    $(el).value = val;
  },
  subscribe: function(el, callback) {
    $(el).on("change.verticalSliderBinding", function(e) {
      callback();
    });
  },
  unsubscribe: function(el) {
    $(el).off(".verticalSliderBinding");
  },
  getRatePolicy: function() {
            return {
            policy: 'debounce',
            delay: 150
            };
  }
});

Shiny.inputBindings.register(verticalSliderBinding, "shiny.verticalSlider");

到目前为止一切顺利。每次我移动 slider 的旋钮时都会调用订阅函数。

但是，当 slider 的值绑定(bind)到 textOutput 时，移动 handle 没有任何效果。Shiny 的“ react 性”似乎不适用于我的自定义组件。有人能指出我正确的方向吗？

Answer 1

嗨，根据 bootstrap-slider readme ，您应该在绑定(bind)中重写 getValue 和 setValue 方法:

getValue: function(el) {
  return $(el).slider('getValue');
},
setValue: function(el, val) {
  $(el).slider('setValue', val);
}

我认为 setValue 仅在您定义更新方法时使用。