रेल 4 - बूटस्ट्रैप स्लाइडर - डेटा टिक्स पर गतिशील रूप से पॉपुलटिंग टूलटिप्स?

Question

मैं अपने रेल 4 ऐप में बूटस्ट्रैप स्लाइडर का उपयोग करने की कोशिश कर रहा हूं।

सुविधा आईएम उपयोग करने का प्रयास कर रहा है इस उदाहरण में बूटस्ट्रैप-स्लाइडर-रेल मणि दस्तावेज़ों में दिखाया गया है।

मैं डेटा स्लाइडर वैल्यू के आधार पर टूल टिप टेक्स्ट को गतिशील रूप से पॉप्युलेट करने की कोशिश कर रहा हूं।

मेरी नजर में, मेरे पास है:

<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.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%>" 
    }); 

does not काम है। मैं अपने स्लाइडर में फॉर्मेटर फ़ंक्शन का उपयोग कैसे करूं?

लेने 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%> बजाए किसी सामग्री लेने का विशेषता और इसे प्रिंटिंग। तो, इस अवधारणा को लागू करने का अगला चरण यह है कि मैं जेएस टूलटिप में डेटाबेस में सहेजे गए डेटा को कैसे पास कर सकता हूं?

Answer 1

कोशिश तत्व, इसलिए जब एचटीएमएल में इनपुट प्रस्तुत किया जाता है तो मान वहां होता है। मैं अपने इनपुट

<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

आप एक जावास्क्रिप्ट लाइब्रेरी में इस रूबी विधि (इस मामले में @project.trl.description) पास नहीं कर सकते हैं (इस मामले में bootstrap-slider)।

मैं क्या विधि @project.trl.description करता है पता नहीं है, लेकिन आप जावास्क्रिप्ट में है कि विधि reimplement और इस तरह इसे पारित करने के लिए है: इनपुट में एक डेटा विशेषता के विवरण का मूल्य बढ़ गया

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