如何使用 JavaScript 更改 erb 变量？

Question

这就是我显示数据的方式。一旦用户单击其中一个 <td>，我想在底栏上显示来自 "empleado" 的其余数据。我正在考虑从 <td> 中获取 innerhtml 数据并使用实例中的 id 来更改用户选择的 id 的数字 12。我希望这能澄清我之前的问题。

<!-- index.html.erb -->
    <!-- TABLE -->

    <div class="panel panel-default lista">
      <div class="panel-heading">
        <h3 class="panel-title">Lista de Empleados</h3>
        <!-- link add empleado -->
        <% if can? :new, @empleado  %>
          <%= link_to "Agregar Empleado", new_empleado_path %>
        <% end %>

      </div>
      <div class="panel-body">
       <table class="table table-bordered">
          <thead>
             <th>Id</th>
             <th>Nombre</th>
             <th>Apellido</th>
             <th>Cedula</th>
             <th>Cargo</th>
             <th>Ciudad</th>
          </thead>
          <tbody>
             <% @empleados.each do |empleado| %>
             <tr class="shows">
                <% if can? :edit, empleado  %>
                <td><%=link_to empleado.id, edit_empleado_path(empleado) %></td>
                <% else %>
                <td><%= empleado.nombre %></td>
                <% end %>
                <td><%= empleado.nombre %></td>
                <td><%= empleado.apellidos %></td>
                <td><%= empleado.cedula %></td>
                <td><%= empleado.cargo %></td>
                <td><%= empleado.ciudad %></td>
             </tr>   
             <% end %>         
          </tbody>
       </table>   


       </div>
    </div>

    <!-- BOTTOM BAR -->
    <!--  -->
    <nav class="navbar navbar-default navbar-fixed-bottom lista-bottom">
      <div class="container show-empleado">
        <% @empleados.each do |empleado| %>
             <% if empleado.id == 12 %>
                <p><%= empleado.otherData %></p>
             <% end %>
        <% end %>
      </div>
    </nav>

感谢您的帮助！

Answer 1

我想出了这个主意。如果你们让我知道这是否是最有效的方法，我将不胜感激。我对服务器进行了 AJAX 调用，然后将其附加到 DOM.

$('.shows').on("click", function(){
   var id = $(this).children("td")[0].innerText;
   showEmpleado(id);
});


function showEmpleado(id){
   console.log(id);
   $.ajax({
      type: "post",
      url: "/empleados/"+id,
      data: id,
      success: function(response, status){
        console.log("Status: ",status);
        displayEmpleado(response);
      }
   }); 
}

function displayEmpleado(empleado){
   console.log("empleado: ", empleado);
   $('.show-empleado').empty();
   $('.show-empleado').append(empleado.otherData);
}

如何使用 JavaScript 更改 erb 变量？

How to change an erb variable with JavaScript?

javascript

erb

ruby-on-rails-4