es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo agregar confirm addeventlistener a diferentes páginas de vista en Rails

17 Jul, 2023 Programación

Tengo dos vistas diferentes: edit.html.erb y create.html.erb
Quiero agregar una funcionalidad similar al hacer clic en una casilla de verificación en ambas páginas, pero quiero evitar escribir código redundante en ambos archivos:

Actualmente, lo que estoy haciendo en ambos archivos es lo siguiente:
En create.html.erb

<script>
function onclick (event) {
var message = '¿Estás seguro?';
confirm(message) || event.preventDefault();
}
var elem = document.getElementById('create');
elem.addEventListener('click', onclick);
</script>

En edit.html.erb


<script>
function onclick (event) {
var message = '¿Estás seguro?';
confirm(message) || event.preventDefault();
}
var elem = document.getElementById('edit');
elem.addEventListener('click', onclick);
</script>

Idealmente, quiero tener un archivo js donde se puedan capturar ambos eventos al hacer clic en crear o editar, en lugar de escribir este método individualmente en ambos archivos. ¿Cuál es una buena forma de hacer DRY aquí?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    DRY significa “No te repitas”, lo cual significa evitar escribir código redundante. En este caso, en lugar de escribir la misma función tanto en los archivos create.html.erb como edit.html.erb, puedes extraerla a un archivo JavaScript separado y luego incluirlo en ambas páginas. Aquí tienes un ejemplo:

    1. Crea un nuevo archivo JavaScript, llamémoslo checkbox.js, y coloca el siguiente código en él:
    function onClickCheckbox(event) {
  var message = '¿Estás seguro?';
  confirm(message) || event.preventDefault();
}

window.onload = function() {
  var createElem = document.getElementById('create');
  if (createElem) {
    createElem.addEventListener('click', onClickCheckbox);
  }
  var editElem = document.getElementById('edit');
  if (editElem) {
    editElem.addEventListener('click', onClickCheckbox);
  }
}
    1. En tus archivos create.html.erb y edit.html.erb, elimina el código JavaScript existente e incluye el archivo checkbox.js usando el método auxiliar javascript_include_tag proporcionado por Rails:
    <%= javascript_include_tag 'checkbox' %>

    Esto incluirá el archivo checkbox.js en tus páginas de creación y edición, y la función onClickCheckbox se ejecutará cada vez que se haga clic en el checkbox.

    Ten en cuenta que utilizamos window.onload para asegurarnos de que el código JavaScript se ejecute solo después de que la página haya cargado. También estamos comprobando si existen los elementos createElem y editElem antes de agregar el event listener, lo cual evita errores si el elemento no está presente en la página.

    Con este enfoque, has evitado repetir el mismo código en varios archivos, lo que hace que tu código sea más mantenible y fácil de entender.

Comments are closed.