5

我正在尝试在我的 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(文档).ready(函数() {

$("#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。那部分工作正常，但我不知道如何让格式化程序功能工作。

我可以从文档中看到格式化程序参数不能作为数据属性传递。

我尝试将其添加到 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 工具提示？

4

2 回答 2

1

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

我不知道该方法的@project.trl.description作用，但是您必须在 JavaScript 中重新实现该方法并像这样传递它：

$('#ex13').slider({
  ... // other options
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});
于 2016-09-03T20:27:42.233 回答
1

尝试将 description 值添加到 input 元素中的 data 属性中，这样当输入在 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")

于 2016-09-09T22:02:11.983 回答