Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - 自定义小部件的 react 性

In lại 作者：行者123 更新时间：2023-11-29 21:03:13 28 4
mua khóa gpt4 Nike

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

我关注了bài viết này为了实现自定义的 verticalSlider 函数

verticalSlider <- function(inputId, min, max, value) {
  tagList(
    singleton(tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "../../../ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.min.css"))),
    singleton(tags$head(tags$script(src = "../../../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 。

$(hàm() {
  $('.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() {
            trở lại {
            policy: 'debounce',
            delay: 150
            };
  }
});

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

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

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

1 Câu trả lời

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

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

Tôi nghĩ setValue 仅在您定义更新方法时使用。

关于javascript - 自定义小部件的 react 性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45479003/

28 4 0
Bài viết được đề xuất: android - 如果应用程序名称周围没有引号或删除名称之间的空格，则无法在商店中找到应用程序
Bài viết được đề xuất: mysql - 合并 2 个具有相似 where 子句但聚合函数目标不同的查询
Bài viết được đề xuất: PHP PDOException 找不到驱动程序
Bài viết được đề xuất: java - 触摸其他通知时重新发送已取消的通知。安卓
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com