Rails 4 -引导滑块-在数据刻度上动态填充工具提示

Rails 4 - Bootstrap Slider - dynamically populating tooltips on data ticks?

本文关键字：填充 工具提示 数据 动态 Rails      更新时间：2023-09-26

我想在我的Rails 4应用程序中使用一个引导滑块。

我尝试使用的特性在这个例子中显示在bootstrap-slider-rails gem docs中。

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

在我看来，我有:

<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(文档)时函数(){

$("#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。这个表有两个属性level(整数)和description(文本)。

数据滑块值显示trl。现在水平。这部分工作得很好，但我不知道如何使格式化器函数工作。

我可以从文档中看到，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%>"
    });

那不行。如何在滑块中使用格式化器功能?

我试着修改我的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工具提示?

尝试将描述值添加到input元素的data属性中，这样当输入在html中呈现时，该值就在那里。我在输入

中添加了一个data-description属性
<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 %>"/>

然后在formatter函数中，使用jquery从data-description

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

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

您不能将Ruby方法(在本例中为@project.trl.description)传递给JavaScript库(在本例中为bootstrap-slider)。

我不知道@project.trl.description方法做什么，但你必须在JavaScript中重新实现该方法，并像这样传递它:

$('#ex13').slider({
  ... // other options
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});
相关文章：