Skip to content

2022_01 Control de autocompletación con paquete autocompleta_ajax

Vladimir Támara Patiño edited this page Jan 27, 2022 · 5 revisions

Para rediseñar la inicialización nos ha servido repasar conceptos de ES6, que refraseamos de Javascript Definitive Guide edición 7: En los módulos, el alcance de las declaraciones de nivel superior (top level o que están fuera de funciones o clases en el archivo) es el módulo mismo, lo que se requiera fuera del módulo debe exportarse explicitamente. Sin embargo, en los scripts que no son módulos, el alcance de las declaraciones de nivel superior es el documento completo, y las declaraciones son compartidas por todos los scripts en el documento. Las declaraciones hechas con function y var (al estilo antiguo) se comparten a través de propiedades del objeto global (window). Las declaraciones hechas con const, let y class también se comparten y tienen el mismo alcance del documento, pero no existen como propiedades del objeto global ni de objeto alguno al cual el código Javascript tenga acceso.

La inicialización de lo escrito en Javascript comienza en app/javascript/application.rb donde preferimos usar la sintaxis moderna y modular de javascript con el espacio de nombres global. Los recursos manejados por sprockets tipicamente estarán en el objeto global y los cargamos después de cargar lo de app/javascript/application.rb (difiriendo la ejecución de ambos tras la carga del HTML completo).

En aplicaciones que usen cor1440_gen ahora debe:

  1. Actualizar a cor1440_gen 2.0a1
  2. Agregar paquete para campos de autocompletación con yarn add https://gitlab.com/pasosdeJesus/autocompleta_ajax.git
  3. El evento turbo:load se podría ejecutar varias veces por eso no se recomienda para inicialización, mover inicializaciones a app/javascript/application. En el caso de inicializaciones manejadas por sprockets dejar en app/assets/javascripts/recursos_sprockets.js las inclusiones de sip/motor y de otros motores, pero mover las inicializaciones a app/javascript/application.js en la sección que se ejecuta después de la carga de los recursos sprockets:
let esperarRecursosSprockets = function (resolver) {                             
  if (typeof window.puntomontaje == 'undefined') {                               
    setTimeout(esperarRecursosSprockets, 250, resolver)                          
    return false                                                                 
  }                                                                              
  resolver("otros recursos manejados con sprockets")                             
  return true                                                                    
}                                                                                
                                                                                 
let promesaRecursosSprockets = new Promise((resolver, rechazar) => {             
  esperarRecursosSprockets(resolver)             
})                                                                               
                                                                                 
promesaRecursosSprockets.then((mensaje) => {                                     
                                                                                 
  console.log('Cargando recursos sprockets')                                     
  var root;                                                                      
  root = window;                                                                 
  sip_prepara_eventos_comunes(root);                                             
})