LimitSlider用のシャイニーカスタム入力バインド

Question

シャイニー用のカスタム入力ウィジェットを作成しようとしています（これに続いて：http://shiny.rstudio.com/articles/building-inputs.html）、jQuery UI Limitslider（）をラップしています - 基本的に、3ノードのスライダを三角分布。私はShinyに変更イベントを「見る」ように奮闘しています。彼らは、「WWW」に住んでいる - あなたは私が事の仕事を作るために先頭にCSSやJSファイルのシーケンスを読み込む見ることができるように

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) 

：ここ

は私のapp.Rスクリプトですディレクトリ。ここに私の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); 

は、私は思いますが、ないです問題は、サブスクリプションプロパティのどこかにあることを確認してください。

私はjQuery UI v1.11.4を使用しています。誰かがヒントや提案や試してみたいことがあれば、私は助けを歓迎するでしょう！

多くの感謝！

Answer 1

私はこれを理解する助けをしてくれました。 jQuery-UIで作成されたlimitsliderには、「変更」関数が初期化されていないことが判明しました。だから、これらの修正プログラムは動作します：

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

私は私のlimitslidershiny.jsファイルにその変更を行いました。

スローされるイベントタイプは "limitsliderchange"と呼ばれています（console.log（event）を実行することで確認できます）。

そうは、それに基づいて、私はlimitsliderinputbinding.jsファイルにこれらの変更を加えた：

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

...と同様に解除します。