Реактивность в пользовательских виджетах

Question

Реактивность в пользовательских виджетах

1

Мне нужно иметь вертикальный ползунок. Поскольку это невозможно при использовании встроенной функции sliderInput, я решил реализовать ее самостоятельно. В соответствии с этой нитью можно либо (1) повернуть виджет sliderInput с помощью CSS, либо (II) использовать общий слайдер и реализовать возможность взаимодействия с Shiny. Я решил пойти на вариант (II), потому что (I) не работал так, как я хотел.

Я выполнил эту статью, чтобы реализовать пользовательскую функцию 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".

$(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");

Все идет нормально. Функция подписки вызывается каждый раз, когда я перемещаю регулятор ползунка.

Перемещение дескриптора не влияет, если значение ползунка привязано к textOutput. Блестящая "реактивность", похоже, не работает для моего настраиваемого компонента. Может ли кто-нибудь указать мне в правильном направлении?

Спасибо,

Гуннар

gunnar.s 03 авг. 2017, в 10:50

Источник

Теги:

javascript

r

shiny

1 ответ

Ещё вопросы

Victorp · Accepted Answer · 2017-08-03T13-45-00.000Z

Привет, в соответствии с readstrap-slider readme, вы должны переписать getValue и setValue в своих привязках:

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

Я думаю, что setValue используется, только если вы определяете метод обновления.

Вау, спасибо! Я, конечно, не ожидал ошибки там. Работает как положено сейчас!