Rails 4 - Bootstrap Slider - динамически заполняемые всплывающие подсказки по тикам данных?

Question

Я пытаюсь использовать слайдер начальной загрузки в приложении Rails 4.

Функция, которую я пытаюсь использовать, показана в этом примере в документах gem dost bootstrap-slider-rails.

Я пытаюсь динамически заполнить текст подсказки инструмента на основе значения ползунка данных.

На мой взгляд, у меня есть:

<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. Эта таблица имеет атрибуты, называемые level (integer) и описание (текст).

Значение ползунка данных теперь показывает уровень trl.level. Эта часть работает нормально, но я не могу понять, как заставить функцию форматирования работать.

Из документов вы можете видеть, что аргумент форматирования нельзя передать как атрибут data.

Я пытался добавить его в метод 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%>" 
    }); 

Это не работает. Как использовать функцию форматирования в моем слайдере?

ПРИНИМАТЬ SUGGESTION Ашитака'S

Я пытался о внесении изменений мои 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 tooltip?

Answer 1

Try, чтобы добавить значение описания для атрибута данных на входе элемент, поэтому, когда ввод отображается в 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")

Answer 2

Вы не можете передать Ruby-метод (в данном случае @project.trl.description) в библиотеку JavaScript (в данном случае bootstrap-slider).

Я не знаю, что метод @project.trl.description делает, но вы должны переопределить этот метод в JavaScript и передать его как этот:

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