mit Schwierigkeiten mit js Verkettung auf Schienen

Question

Dies ist mein html und meinem Verständnis im fragen Sie den Browser meine Projekte alle anzuzeigen, und dann einen Schieber setzen, die

<div class='nav_bar'>#</div> 
<% if @projects %> 
    <% @projects.each do |project| %> 
     <li><div class='container'><h1><%=project.name %> </h1> 
      <ul> 
       <%= form_for project do %> 
       <%= fields_for :palette, project.palette do |palette| %> 
       <input type="range" id="slider<%=@project.id%>" min="1" max="255" > 
       <div id="output<%=@project.id%>"> </div> 

        <%= palette.label 'background_dark_color' %>: 
        <%= palette.text_field :background_dark_color, placeholder: '@palette.background_dark_color' %><br/> 

        <%= palette.label 'background_light_color' %>: 
        <%= palette.text_field :background_light_color, placeholder: "@palette.background_light_color" %><br/> 

        <%= palette.label 'dark_color1' %>: 
        <%= palette.text_field :dark_color1, placeholder: "@palette.dark_color1" %><br/> 

        <%= palette.label 'dark_color2' %>: 
        <%= palette.text_field :dark_color2, placeholder: "@palette.dark_color2" %><br/> 

        <%= palette.label 'light_color1' %>: 
        <%= palette.text_field :light_color1, placeholder: "@palette.light_color1" %><br/> 

        <%= palette.label 'light_color2' %>: 
        <%= palette.text_field :light_color2, placeholder: "@palette.light_color2" %><br/> 

        <%= palette.submit %> 

        <%= link_to 'Destroy', project, method: :delete, data: { confirm: 'Are you sure?' } %> 

       <% end %> 
       </div> 
      </ul> 

     <% end %></li> 
    <%end%> 
<%end%> 
<div class='circle'><%= link_to "+", new_project_path %></div> 
<button type="button"><%= link_to "+", new_project_path %></button> 

von js angehört werden, und dies ist die js für den Schieber in Frage

window.addEventListener("load", function(){ 
    var slider = document.getElementById("slider<%=@project.id%>"); 
    slider.addEventListener("change", function(){ 
     document.getElementById("output<%=@project.id%>").innerHTML = "value : " + this.value; 
    }); 
}); 

I 2 Theorien, aber keine Lösung, meine erste Theorie ist, ich nicht richtig bin verketten (dies ist js.erb)

und meine zweite Theorie ist th Da es auf Fensterladen ist, wenn es nach der ID fragt, sind sie nicht da, was könnte ich tun? :/

Answer 1

Sie können keine Klasseninstanzvariablen in js.erb abrufen, es sei denn, Sie verwenden gon gem.

Alternativ (und einfacher) Sie können nur den Wert von @ project.id zuweisen zu einem divs Datenattribut und dann die js verwenden, um abzurufen, dass

<div data-project-id="<%= @project.id %>"></div> 

var projectId = $('[data-project-id]').data('projectId'); 

window.addEventListener("load", function(){ 
    var slider = document.getElementById("slider"+projectId); 
    slider.addEventListener("change", function(){ 
    document.getElementById("output"projectId).innerHTML = "value : " + this.value; 
    }); 
});