¿Cómo estructura sus aplicaciones web para facilitar AJAX y DHTML?

StackOverflow https://stackoverflow.com/questions/8346437

Pregunta

Dada esta estructura para una WebSINTE

<html>
  <head>
    <!-- CSS at the beginning-->
    <link/>
  </head>
  <body>
    <div id="mainContainer">
      <div id="side"></div>
      <div id="content">
         <!-- DHTML awesomeness happens here -->
      </div>
    </div>
    <!-- Scripts at the end -->
    <script/>
    <script>
         /* code that attach the JS logic to the HTML items */
    </script>
  </body>
</html>

Usando la navegación web normal, la página se vuelve totalmente en HTML y, después del enfoque de mejora progresiva, al final busco algunas identificaciones o clases específicas, y les doy un comportamiento dinámico usando JavaScript y especialmente jQuery. Este código de mejora ocurre al final del cuerpo, después de que se ha descargado los scripts externos.

En #content, Se producen muchas interacciones jQuery Ajax, algunas de ellas obtienen otras vistas parciales del servidor e insertanlas en la página, pero luego tengo que buscar esas ID y clases nuevamente y adjuntar objetos JavaScript a estos nuevos elementos.

Podría ser muy engorroso, ya que no desea volver a aplicar controladores, manejadores de eventos o lo que sea a los objetos que ya los tienen.

Hasta ahora, la única solución que encontré es poner en mis puntos de vista parciales:

@if(Request.IsAjaxRequest())
{
   <script> 
       /* code that attach the JS controllers to the HTML items of this view */
   </script>
}

Creo que un problema similar ocurre, por ejemplo, cuando quieres $('input.date').datepicker() , y agregas nuevo <input type="text" class="date"/> Los elementos dinámicamente, los nuevos no tienen fechas a menos que rexectes la oración jQuery.

Por ejemplo, teniendo en cuenta que en #content Yo tengo un <input type="text" class="date"/>:

  1. Para que el jQuery datepicer funcione la primera vez, tengo que llamar $('input.date').datepicker() al final de <body>, después del externo <script> declaraciones.

  2. Si la página descarga vistas parciales, ¿dónde son nuevas? <input type="text" class="date"/>elementos, tengo que poner la llamada de inicialización en la vista para las llamadas AJAX.

Así que termino con código repetido, algo que no quiero especialmente en JS donde no puedo refactorizar el código tan fácilmente como en C#.

Esto es algo que me está volviendo loco en la última semana, ¿se pregunta si hay una mejor manera de lograr esto? ¿Una mejor técnica u otro enfoque completo?

¿Cómo estructura sus aplicaciones web?

Atentamente.

PD: Sería bueno tener algo como .live() o .delegate() Pero no solo relacionado con los eventos, ¿no? ¿No hay algún evento que jQuery/Browser aumente cada vez que se agrega algo al DOM?

¿Fue útil?

Solución

Esto puede ser solo una respuesta parcial a su pregunta, si la entiendo correctamente.

Con respecto a su ejemplo con <input type="text" class="date" />, experimentamos un problema similar con nuestras vistas de formularios parciales que utilizan la validación discreta de jQuery. Al cargarlos en el navegador, tuvimos que llamar $.validator.unobtrusive.parse('a form selector'); Para que las reglas de validación se apliquen durante el siguiente envío del formulario.

Si su objetivo es evitar el código repetido, puede hacer que sus acciones JS no son obstrusas, utilizando un patrón como en la validación discreta de JQ lib. Entonces terminarías con HTML que se parece más a esto:

<input type="text" class="date" data-datepicker="true" />

Luego puede poner la lógica de inicialización en un método de análisis discreto.

parse: function(selector) {
    $(selector).find(':input[data-datepicker=true]').each(function() {
        $(this).datepicker();
    }
};

}

Esto resuelve su problema de tener un lugar para refactorizar el código. Puede hacer que se inicie automáticamente cuando la página se carga primero, y cuando carga nuevo contenido a través de AJAX, puede aplicar la regla a todos los elementos coincidentes simplemente llamando myAppNamespace.unobtrusive.parse('selector for the partial view content');

Actualizar

Eche un vistazo al archivo jquery.validate.unobtrusive.js en su carpeta Scripts. Realmente es bastante inteligente, y si en realidad no está extendiendo otro complemento de jQuery (como Validate), su código terminaría mucho más delgado. Si está buscando una separación completa de HTML y Script, usar los atributos de datos discretos HTML5 es una buena solución IMO.

Otros consejos

He marcado la respuesta @OliveHour como correcta, ya que establece una buena solución para el problema.

Lo que finalmente he hecho es mover el archivo jQuery a la cabeza, y solo el archivo jQuery, el resto como "jQuery-ui" o los archivos JS personalizados todavía están en la parte inferior.

La razón es poder usar $(document).ready o $(function(){}), Desde que usé eso en la vista, el código se ejecuta en "Onload" o de inmediato si el "Onload" ya se ha planteado, lo que es perfecto para lo que quiero.

Salud.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top