Guías de Make it Real
Search…
Usando JavaScript (y jQuery) en Rails
Instalación
jQuery viene incluído por defecto en la versión 5.0.x o inferior de Ruby on Rails.
Desde la versión 5.1 debes instalarlo utilizando la gema jquery-rails o un manejador de paquetes llamado Yarn.
La forma más fácil es utilizar la gema. Sin embargo, si quieres utilizar Yarn puedes seguir estos pasos:
- 1.
- 2.Desde la consola ejecuta
yarn install jquery. - 3.Agrega la dependencia en
app/assets/javascripts/application.js:1//= require rails-ujs2//= require turbolinks3//= require jquery4//= require_tree .Copied!
CoffeeScript
Por defecto Ruby on Rails utiliza CoffeeScript, un lenguaje que Rails convierte automáticamente a JavaScript.
Cada vez que creas un controlador se crea un archivo en
app/assets/javascripts con el nombre del controlador y la extensión .coffee.Si quieres utilizar JavaScript puedes cambiar la extensión del archivo a
.js.CoffeeScript es un lenguaje muy interesante que está por fuera del alcance del curso pero que puedes investigar por tu propia cuenta iniciando por la página oficial.
Uso
Existen varias partes donde puedes escribir tu código JavaScript en Ruby on Rails: al final de cada vista, en el archivo
.js de cada controlador o utilizando vistas de JavaScript.Al final de cada vista
La forma más fácil de utilizar jQuery en tu aplicación es incluir el código JavaScript al final de cada vista. Por ejemplo:
1
<button class="show-btn">Mostrar alerta</button>
2
3
<script>
4
$('.show-btn').on('click', function() {
5
alert("Esta es una prueba");
6
});
7
</script>
Copied!
Sin embargo, esta forma no es muy recomendada porque estamos mezclando el código HTML y ERB con el código JavaScript.
En el archivo .js
.jsLa forma en que recomendamos incluir el código JavaScript de tu aplicación es en el archivo
.js que se crea para cada controlador.Sin embargo, es importante entender lo siguiente: Ruby on Rails empaqueta todos los archivos
.js en un solo archivo y ese archivo solo se carga la primera vez que el usuario entra a la aplicación, lo que presenta varios retos a la hora de escribir tu código JavaScript.Lo que recomendamos es crear una función constructora en el archivo
.js e invocarla desde la vista en la que lo necesitas.Por ejemplo, imagina que tenemos un controlador
ProductsController y necesitamos ubicar un código en la vista index.html.Primero, en el archivo
.js crearíamos una función constructora llamada ProductsView:1
function ProductsView() {
2
$('.show-btn').on('click', function() {
3
alert("Esto es una prueba");
4
});
5
}
Copied!
Y en la vista la invocaríamos de la siguiente forma:
1
<button class="show-btn">Mostrar alerta</button>
2
3
<script>
4
new ProductsView();
5
</script>
Copied!
De esa forma sólo se ejecuta el código JavaScript necesario en la vista y no debemos preocuparnos por esperar a que el DOM esté cargado.
Vistas de JavaScript
Rails hace muy fácil hacer llamados AJAX a tu aplicación y actualizar la página sin necesidad de refrescarla utilizando vistas de JavaScript.
Puedes agregarle
remote: true a cualquier link_to, button, form_for o form_tag para indicarle a Rails que esto debe ser un llamado AJAX. Por ejemplo:1
<%= link_to "Mostrar alerta", products_path, remote: true %>
Copied!
Y después crear una vista con extensión
.js.erb.Por ejemplo, como en el link anterior estamos llamando
products_path, es decir, el index de ProductsControllers, crearíamos una vista app/views/products/index.js.erb con contenido JavaScript:1
alert("Hola Mundo!");
2
3
// borremos todos los párrafos
4
$('p').remove();
Copied!
En este post de Make it Real aprenderás a utilizar esta técnica para mostrar formularios dentro de modales de Bootstrap.
Turbolinks
Last modified 3yr ago