Rails 4 - Bootstrap Slider - 在数据滴答上动态填充工具提示？

Question

我正在尝试在我的Rails 4应用程序中使用引导滑块.

我试图使用的功能在bootstrap-slider-rails gem文档中的示例中显示.

我正在尝试根据数据滑块值动态填充工具提示文本.

在我看来,我有:

<input id="ex13" type="text" data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"]' data-slider-value="<%= @project.trl.level %>"/>

然后在我的js文件中,我有:

jQuery(document).ready(function(){

$("#ex13").bootstrapSlider({
    ticks: [ 10, 20, 30, 40, 50, 60, 70, 80],
    ticks_labels: ["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"],
    ticks_snap_bounds: 30,
    orientation: 'vertical',
    tooltip_position: 'left',
    enabled: false
});

});

我有一个名为TRL的模型.该表具有称为级别(整数)和描述(文本)的属性.

数据滑块值现在显示trl.level.这部分工作正常,但我无法弄清楚如何使格式化程序功能工作.

我可以从文档中看到,formatter参数不能作为数据属性传递.

我尝试将它添加到js方法,

$("#ex13").bootstrapSlider({
        ticks: [ 10, 20, 30, 40, 50, 60, 70, 80],
        ticks_labels: ["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"],
        ticks_snap_bounds: 30,
        orientation: 'vertical',
        tooltip_position: 'left',
        enabled: false,
        formatter: "<%= @project.trl.description%>"
    });

那不起作用.如何在滑块中使用格式化程序功能？

采取ASHITAKA的建议

我试着修改我的js:

jQuery(document).ready(function() {



    $("#ex13").bootstrapSlider({
        ticks: [ 10, 20, 30, 40, 50, 60, 70, 80],
        ticks_labels: ["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"],
        ticks_snap_bounds: 30,
        orientation: 'vertical',
        tooltip_position: 'left',
        enabled: false,
        // formatter: "<%= @project.trl.description%>"
        formatter: function(value) {
        return "<%= @project.trl.description%>";
        }
    });

}); 

该尝试打印出<%= @ project.trl.description%>,而不是获取该属性的内容并将其打印出来.因此,实现此概念的下一步是如何将保存在数据库中的数据传递给js工具提示？

Answer 1

尝试将描述值添加到输入元素中的数据属性中，以便在 html 中呈现输入时该值就在那里。我在您的输入中添加了数据描述属性

<input id="ex13" type="text" data-description="<%= @project.trl.description%>" data-slider-ticks="[1, 2, 3, 4, 5, 6, 7, 8]" data-slider-ticks-snap-bounds="30" data-slider-ticks-labels='["Breadboard", "High Fidelity", "Low Fidelity", "Demonstration", "Operational Environment", "Prototype", "Relevant Environment", "Simulation"]' data-slider-value="<%= @project.trl.level %>"/>

然后在格式化函数中，使用 jquery 从数据描述中获取值

formatter: function(value) {
    var description = $('#ex13').attr("data-description")
    return value+' '+description;
}

如果你的jquery版本> 1.4.3那么你应该使用 $('#ex13').data("description")