Question

我正在尝试为Shiny编写自定义输入小部件（在此之后：http://shiny.rstudio.com/articles/building-inputs.html），包装jQuery UI Limitslider（http://vanderlee.github.io/limitslider/） - 基本上，我想要一个包含3个节点的滑块对三角形分布进行参数化。我正在努力让Shiny“看到”改变事件。

这是我的 app.R 脚本：

library(shiny)

limitSlider <- function(id, label, a, b, c, min = a, max = b) {
   div(class = 'form-group shiny-input-container',
       tags$label(label),
         div(class = "ui-limitslider", 
             id = id,
             `data-a` = a,
             `data-b` = b,
             `data-c` = c,
             `data-min` = min,
             `data-max` = max)
   )
}

ui <- shinyUI(fluidPage(

  tags$head(
    tags$link(rel = "stylesheet", type = "text/css",
              href = "jquery-ui.css")
  ),

  tags$head(
    tags$link(rel = "stylesheet", type = "text/css",
              href = "limitslider.css")
  ),

  tags$head(
    tags$script(src = "jquery-ui.js")
  ),

  tags$head(
    tags$script(src = "limitslider.js")
  ),

  tags$head(
    tags$script(src = "limitslidershiny.js")
  ),

  tags$head(
    tags$script(src = "limitsliderinputbinding.js")
  ),

  titlePanel("Test Limit Slider"),

  sidebarLayout(
    sidebarPanel(
      limitSlider("test1", "Test 1:", a = 25, b = 110, c = 80,
                   min = 0, max = 200),
    ),
    mainPanel(
      tableOutput("values")
    )
  )
))


server <- shinyServer(function(input, output) {

  sliderValues <- reactive({

    data.frame(
      Name  = c("test1"),
      Value = c(as.character(c(paste(input$test1, collapse = ' '))))
    )

  })

  output$values <- renderTable({
    sliderValues()
  })

})

# Run the application 
shinyApp(ui = ui, server = server)

正如您所看到的，我在顶部加载了一系列CSS和JS文件以使其工作 - 它们位于“www”目录中。这是我的 limitslidershiny.js 文件 - 我认为问题不在这里：

$(function() {

  $('.ui-limitslider').each(function(){

    // a,b,c correspond to the rtriangle function signature
    var a = $(this).data('a');
    var c = $(this).data('c');
    var b = $(this).data('b');

    // the rest of these correspond to the limitslider API
    var min = $(this).data('min');
    var max = $(this).data('max');

    $(this).limitslider({
      values: [a, c, b],
      gap: 0,
      label: true,
      min: min,
      max: max
    });
  });
});

这是我的 limitsliderinputbinding.js 脚本：

var limitSliderInputBinding = new Shiny.InputBinding();

$.extend(limitSliderInputBinding, {

  find: function(scope) {
    return $(scope).find(".ui-limitslider");
  },

  getValue: function(el) {
    return $(el).limitslider("values");  
  },

  setValue: function(el, values) {
    $(el).limitslider("values", values);
  },

  subscribe: function(el, callback) {
    $(el).on("slidechange.limitSliderInputBinding", function(e) {
      callback();
    });
  },

  unsubscribe: function(el) {
    $(el).off(".limitSliderInputBinding");
  }

});

Shiny.inputBindings.register(limitSliderInputBinding);

我认为，但不确定，问题出在 subscribe 属性中。

我正在使用jQuery UI v1.11.4。如果有人有任何提示或建议或事情要尝试，我欢迎帮助！

非常感谢！

Answer 1

好的，有些同事帮我解决了这个问题。事实证明，基于jQuery-UI构建的limitslider并没有带来改变＆＃34;函数初始化。所以，这些修复工作：

$(this).limitslider({
   values: [a, c, b],
   gap: 0,
   label: true,
   min: min,
   max: max,
   change: function(event, ui){}
})

我对 limitslidershiny.js 文件进行了修改。

事实证明，抛出的事件类型称为＆＃34; limitsliderchange＆＃34; （你可以通过执行console.log（event）来看到。）

因此，基于此，我对limitsliderinputbinding.js文件进行了以下更改：

subscribe: function(el, callback) {
  $(el).on("limitsliderchange.limitSliderInputBinding", function(e) {
    callback();
  });
}

......和取消订阅类似。

LimitSlider

1 个答案: