El pedido de mi jefe para convertir un sitio web en una aplicación de una sola página.
Las migraciones de jQuery a React/Vuejs requirieron mucha refactorización tanto en el frontend como en el backend. así que decidimos hacer una aplicación de una sola página usando jQuery.
tengo que hacer lo siguiente:
1- Dividí el documento así
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="navbar"> </div> <div id = "sidebar"> </div> <div > <ul class="nav nav-tabs mainTabs" id="myTab"> <li class="active "><a href="#home" class="backgroundRed">Inbox </a> </li> </ul> <div id="root"> </div> </div> </body> </html>Puede buscar este ejemplo para obtener más información sobre el diseño de pestañas.
2- Convertí todos los archivos del proyecto al módulo js6.
3- Creé el archivo js para el enrutador y para devolver el contenedor actual.
function getCurrentContainer(){ var path = document.location.pathname.replace('/','_'); return $('#'+path) }4- Cuando el usuario hace clic en el enlace, uso ajax para traer solo el contenido, luego lo agrego a una nueva pestaña.
$(document).on('click','a[data="no-reload"]',function(){ var path = $(this).attr('href'); if (!$('#'+path.replace('/','_')).length){ $.ajax(..) // bring content from server and make new tab } //function to show content of other tab and hide content of current tab // change the document title, url and update history }); 5- Reemplacé todos los selectores $(document) por $(currentContainer) .
import {getCurrentContainer} from './my_router.js' const $container = getCurrentContainer(); $($container). ... // instead of $(document). ...El problema es:
cuando selecciono la entrada, $('[input[name=id]') , seleccionará todas las entradas de ids de pestañas ocultas. Puedo resolverlo con $(currentContainer).find('[input[name=id]') pero lleva mucho tiempo refactorizar todas las operaciones.
¿Puedo reinicializar el $, para cambiar la raíz a currentContainer en lugar de documento,
$ = ? //make currentContainer selector as root