Share
En este tutorial, veremos cómo el sistema de plantillas beta de jQuery se puede utilizar de manera excelente para desacoplar completamente nuestro HTML de nuestros scripts. También echaremos un vistazo rápido al módulo AJAX completamente renovado de jQuery 1.5.
La plantilla es una novedad (aún está en versión beta, por lo que es probable que cambie ligeramente a medida que madura y migra hacia el núcleo, pero ha estado disponible durante la mayor parte del año), una función jQuery enormemente poderosa que nos permite especificar una plantilla para usar al crear estructuras DOM a través de scripts, algo que estoy seguro de que todos hacemos casi a diario.
Siempre ha sido increíblemente fácil cuando se usa jQuery para hacer algo como esto:
Accentsconagua
$ ("# someElement"). children (). each (function () $ (this) .wrap ($ (""));); Las plantillas nos permiten eliminar estos fragmentos de código HTML basados en cadenas de nuestro comportamiento..
Esto simplemente envolverá cada elemento hijo de La creación de plantillas nos permite eliminar estos fragmentos de código HTML basados en cadenas de nuestra capa de comportamiento y volver a colocarlos firmemente donde pertenecen en la capa de contenido. Mientras lo hacemos, también podemos ver una de las características AJAX súper geniales de jQuery 1.5: objetos diferidos.. En este ejemplo, crearemos un widget de Twitter que no solo cargará algunos de nuestros tweets recientes, sino que también incluirá algunos amigos, seguidores y sugerencias. Escogí Twitter para este ejemplo porque genera JSON en el formato que requerimos; es facil y divertido. Entonces empecemos; el propio widget se construirá a partir del siguiente marcado subyacente: Estamos utilizando HTML5 y hemos incluido el simplificado. Este widget probablemente iría a una barra lateral, y sería distinto del contenido real de la página en la que aparece, pero relacionado con el sitio en su conjunto. Con eso en mente, siento una Continuando con nuestro marcado, tenemos algunos detalles sobre el usuario de Twitter cuyos tweets están listados, incluido el nombre en una A continuación, tenemos las pestañas que se utilizarán para cambiar entre los tweets, amigos y seguidores. Estos se construyen a partir de una simple colección de Tenga en cuenta que también estamos usando un complemento - esta es la Finalmente, tenemos los elementos que contendrán cada flujo de datos; tenemos un contenedor exterior con una Coge una copia ahora y pégala en la misma carpeta que la página web que acabamos de crear.. Mencioné una hoja de estilo personalizada anteriormente; agreguemos eso ahora mismo; en un nuevo archivo en su editor de texto agregue el siguiente código: Guardar este archivo como Vamos a juntar el script básico y hacer que esas pestañas funcionen. En otro archivo nuevo en su editor de texto, agregue el siguiente código: Guardar este archivo como Tendremos que seleccionar elementos repetidamente a lo largo del código; por lo tanto, almacenar en caché una referencia al contenedor externo ayuda a minimizar el número de objetos jQuery que necesitamos crear. A continuación, configuramos un controlador de clic para los enlaces de pestaña que obtiene el Ahora comienza la verdadera diversión; podemos hacer las solicitudes a Twitter para obtener nuestros tres conjuntos de datos y hacer uso del complemento de plantillas de jQuery para crear los elementos DOM necesarios utilizando los datos que obtenemos de las solicitudes. Primero obtendremos los datos y luego agregaremos las plantillas. Después de hacer clic en el controlador para los enlaces de la herramienta, agregue el siguiente código: Primero, usamos jQuery. Luego definimos tres funciones estándar; Dentro de cada función utilizamos jQuery. Para garantizar que los datos se almacenen en el formato correcto para JSON, utilizamos la notación de corchetes. No necesitamos tantos datos, así que en cada los Las funciones para recuperar las listas de amigos y seguidores son prácticamente idénticas. Nuevamente, cambiamos el nombre de las propiedades con las que trabajaremos cuando construyamos nuestros objetos y los almacenemos en cada matriz. Los tres de nuestros manejadores de éxito almacenan las matrices de 5 elementos resultantes en el Tenga en cuenta que no invocamos a cada uno de nuestros los Una vez que se han devuelto todas las funciones, el objeto diferido se resuelve y cualquier función registrada con Esto es increíble; queremos hacer las tres solicitudes, pero no tenemos forma de saber de antemano cuál de ellas se devolverá en último lugar, por lo que es imposible utilizar la función de devolución de llamada de cualquier solicitud si deseamos procesar los datos devueltos de todas las funciones en el Mismo tiempo. En el pasado, probablemente habríamos tenido que configurar un intervalo que sondeaba repetidamente cada función para verificar si había regresado, y esperar hasta que todas hubieran terminado antes de continuar. Ahora podemos delegar todo este seguimiento manual a jQuery para que se encargue de nosotros automáticamente. Usamos dos funciones de utilidad en este ejemplo: los A continuación creamos algunas variables; establecimos una matriz que contiene nombres de días abreviados, con domingo (o Sol) como el primer elemento de la matriz. Los días en las fechas de JavaScript están basados en cero, y el domingo siempre aparece como el día 0. Luego creamos un Fecha objeto usando el Luego creamos otra matriz que contiene tres elementos: el primer elemento obtiene el día de la semana correcto de la primera matriz que creamos dentro de esta función, el siguiente elemento obtiene la fecha localizada y el último elemento obtiene la hora localizada. Finalmente, devolvemos el contenido de la matriz después de que nos hayamos unido. Simplemente podríamos usar la concatenación de cadenas para construir esta cadena de fecha, pero unir elementos de la matriz es mucho más rápido que crear cadenas manualmente. los Luego probamos el texto para ver si contiene algún nombre de usuario; si lo hace, entonces dividimos la cadena de texto en cada aparición de un nombre de usuario. Esto nos dará una matriz que contiene elementos que son texto sin formato o un nombre de usuario. Luego, recorremos cada elemento de esta matriz y verificamos si cada elemento contiene el Eso es; Una vez que hemos almacenado nuestros objetos, la función devuelve el nuevo Ahora que tenemos nuestros datos JSON procesados, podemos pasar a la parte final del ejemplo: plantillas. En la función anónima pasada a la Este código simplemente aplica las plantillas usando el método de complemento de plantillas jQuery Vuelve al HTML y primero agrega lo siguiente Las plantillas jQuery se agregan a la página HTML usando Esta plantilla es mucho más sencilla, ya que no estamos usando plantillas anidadas ni haciendo ninguna iteración, simplemente estamos insertando los datos de cada matriz JSON usando la Ahora que aplicamos las plantillas y completamos nuestro widget, podemos agregar algunos estilos CSS más para poner en orden los nuevos elementos que se han agregado; en tweetbox.css agrega el siguiente código al final del archivo: Guarde el archivo, nuestra página debería aparecer como sigue: Todavía hay una cosa más que probablemente deberíamos hacer: en este momento, nuestra función de formato de tweet no funciona en IE debido a cómo IE trata a Esto debe agregarse directamente antes de la referencia de script a nuestro En este tutorial analizamos algunas de las funciones más avanzadas de las plantillas de jQuery, como la iteración de elementos con Un punto clave es que el nuevo sistema de plantillas de jQuery nos permite separar mejor nuestro comportamiento y las capas de presentación, moviendo todos los fragmentos de código HTML de la Algunos podrían argumentar que ahora solo tenemos la situación opuesta y simplemente tenemos más Sin embargo, creo que esto es infinitamente preferible a la alternativa. Elementos en el formato. También vimos la excelente noticia. Muchas gracias por leer y hacerme saber si tiene alguna pregunta.!#someElement en un nuevo
Empezando
DOCTYPE y juego de caracteres meta elemento. Enlazamos con una hoja de estilo personalizada, que crearemos en un momento, y para admitir las versiones actuales de IE8 y versiones inferiores, usamos un comentario condicional para vincular a las páginas alojadas en Google. html5shiv expediente. Utilizando
aparte Es un contenedor exterior apropiado en este caso. Le damos un carné de identidad para una fácil selección y estilo., Una imagen y la biografía en un estándar. . Siéntase libre de cambiar esto a sus propios detalles al reconstruir el ejemplo. Podríamos obtener todos estos elementos de la llamada JSON que haremos cuando solicitemos los datos; sin embargo, si hay un ligero retraso en la solicitud al cargar la página, el visitante puede quedarse mirando un montón de casillas vacías. por lo tanto, codificar esta información en el widget es apropiado. Si estuviéramos creando un complemento para que otros desarrolladores lo consumieran, ciertamente no podríamos hacer esto, pero al agregarlo a nuestro sitio o al sitio de un cliente específico, este es un enfoque factible.. y elementos. La pestaña de amigos se mostrará de forma predeterminada, por lo que el enlace para esta pestaña tiene la clase en adjunto a. En un proyecto más grande, podríamos, por supuesto, usar las pestañas de la interfaz de usuario de jQuery, pero no quería que el tutorial perdiera el enfoque, y no es una molestia agregar esta funcionalidad manualmente..tmpl (Plantilla), que nos permite usar plantillas jQuery. carné de identidad de alimentar, y tres contenedores para los tweets, amigos y seguidores respectivamente, que también tienen carné de identidad atributos para una fácil selección. También incluimos un Elemento para los visitantes que pueden tener el script desactivado (si es que ya existe alguno), que se encuentra dentro del área de contenido de la pestaña predeterminada. Tenga en cuenta que también estamos usando un complemento - esta es la tmpl (Plantilla), que nos permite utilizar plantillas jQuery. Este archivo se puede descargar desde aquí.#tweetbox display: block; ancho: 300px; relleno: 10px; borde: 1px sólido #aaa; -moz-border-radius: 5px; radio del borde: 5px; Familia tipográfica: "Trebuchet MS", Arial, Helvetica, sans-serif; color de fondo: #eee; #tweetbox img display: block; #user margin-bottom: 10px; flotador izquierdo; #user h2 margen: 0 0 10px 0; posición: relativa; tamaño de fuente: 18px; #user img float: left; #user p width: 230px; margen: 0; posición: relativa; flotador izquierdo; tamaño de fuente: 10px; color: # 333; #user img display: block; margen derecho: 10px; borde: 3px sólido # 333; #tools margen: 0; * margen inferior: -10px; relleno: 0; Limpia los dos; tipo de estilo de lista: ninguno; #tools li float: left; #tools a display: block; altura: 20px; relleno: 3px 24px; borde: 1px sólido #aaa; borde inferior: ninguno; -moz-border-radius: 5px 5px 0 0; radio del borde: 5px 5px 0 0; margen derecho: -1px; posición: relativa; tamaño de fuente: 14px; esquema: ninguno; color de fondo: # d6d6d6; imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (0.5, # E8E8E8), stop de color (0, #DBDBDB), stop de color (0.5, # D6D6D6)); imagen de fondo: -moz-lineal-gradiente (centro superior, # E8E8E8 50%, #DBDBDB 0%, # D6D6D6 50%); a texto-decoración: ninguno; color: # 333; #tools .on altura: 21px; margen superior: -1px; superior: 1px; #feed ancho: 298px; borde: 1px sólido #aaa; Limpia los dos; color de fondo: # d6d6d6; #feed> div display: none; noscript display: block; relleno: 10px; tamaño de fuente: 13px; color: # 333;
tweetbox.css en el mismo directorio que la página HTML. Esto es solo un poco de estilo de diseño para nuestro widget. Hay un par de detalles de CSS3 para navegadores capaces: algo de acción de esquinas redondeadas (note que ya no necesitamos el -webkit- prefijo de proveedor para esquinas redondeadas en los últimos navegadores de kits web!) y algunos gradientes para las pestañas. Un punto a tener en cuenta es que ocultamos todos los contenedores dentro del elemento feed, excepto el que tiene la clase. activo. En este punto (y con JS deshabilitado), el widget debería verse así:
Añadiendo el Script
(function ($) // tabs var tweetbox = $ ("# tweetbox"), tweetData = null, friendData = null, followData = null; tweetbox.find ("# tools a"). click (function (e) e.preventDefault (); var link = $ (this), target = link.attr ("href"). split ("#") [1]; tweetbox.find (". on"). removeClass ("on" link.addClass ("on"); tweetbox.find ("# feed> div"). hide (); tweetbox.find ("#" + target) .show (););) (jQuery) ; tweetbox.js en el mismo directorio que la página HTML. Todo es bastante sencillo y, como no es realmente el enfoque principal de este tutorial, no voy a entrar demasiado en él. Todo lo que hacemos es alias el carácter de cadena dentro de una función anónima, que ejecutamos de inmediato (más por buena práctica que por pura necesidad en este ejemplo) y luego cacheamos un selector para el contenedor externo principal del widget. También inicializamos tres variables para su uso más adelante, y establecemos sus valores en nulo.carné de identidad de la pestaña para mostrar desde el href del enlace en el que se hizo clic, elimina el nombre de la clase en desde los enlaces de la pestaña y luego lo vuelve a agregar al enlace en el que se hizo clic. Luego, ocultamos todos los paneles de pestañas, antes de mostrar el panel de pestañas seleccionado.
Obteniendo los datos
$ .ajaxSetup (dataType: "jsonp"); function getTweets () $ .ajax ("http://api.twitter.com/statuses/user_timeline/danwellman.json", success: function (data) var arr = []; for (var x = 0; X < 5; x++) var dataItem = ; dataItem["tweetlink"] = data[x].id_str; dataItem["timestamp"] = convertDate(data, x); dataItem["text"] = breakTweet(data, x); arr.push(dataItem); tweetData = arr; ); function getFriends() return $.ajax("http://api.twitter.com/1/statuses/friends/danwellman.json", dataType: "jsonp", success: function(data) var arr = []; for (var x = 0; x < 5; x++) var dataItem = ; dataItem["screenname"] = data[x].screen_name; dataItem["img"] = data[x].profile_image_url; dataItem["name"] = data[x].name; dataItem["desc"] = data[x].description; arr.push(dataItem); friendData = arr; ); function getFollows() return $.ajax("http://api.twitter.com/1/statuses/followers/danwellman.json", dataType: "jsonp", success: function(data) var arr = []; for (var x = 0; x < 5; x++) var dataItem = ; dataItem["screenname"] = data[x].screen_name; dataItem["img"] = data[x].profile_image_url; dataItem["name"] = data[x].name; dataItem["desc"] = data[x].description; arr.push(dataItem); followData = arr; ); //execute once all requests complete $.when(getTweets(), getFriends(), getFollows()).then(function() //apply templates ); ajaxSetup () método para establecer el tipo de datos opción a jsonp para todas las solicitudes posteriores. Como esta será la tipo de datos utilizado por cada una de nuestras solicitudes, tiene sentido simplemente configurar la opción una vez.ajax () método para realizar una solicitud al servicio web que devuelve cada conjunto de datos con los que trabajaremos, el línea de tiempo del usuario, amigos y seguidores respectivamente. En el objeto de configuración para cada solicitud, definimos un éxito controlador que se ejecutará una vez que cada solicitud individual devuelva con éxito. Cada una de estas solicitudes devolverá un objeto JSON que potencialmente contiene hasta 100 objetos llenos de datos de Twitter.éxito En el controlador creamos una nueva matriz, que a su vez contendrá una serie de objetos que contienen solo los datos que realmente vamos a utilizar. Para garantizar que los datos se almacenen en el formato correcto para JSON, donde cada nombre de propiedad debe ser una cadena, usamos la notación de corchetes para establecer los nombres de las propiedades en formato de cadena.línea de tiempo del usuario solicitud almacena el cadena de identificación del tweet que se puede utilizar como parte de una URL que apunta al tweet, así como almacenar el resultado de dos funciones de utilidad. La primera de estas funciones crea una cadena de datos con formato que convierte la fecha devuelta por Twitter en algo que es un poco más bonito y se localiza en la máquina del espectador. También formateamos el texto del tweet para que podamos atificar cualquier @usernames Encontrado en el texto. Veremos brevemente las funciones de formateador de fecha y tweet..nulo variables que establecemos en la parte superior de la secuencia de comandos.getTweets (), conseguir amigos() y Consigue seguidores() funciones de forma manual. En su lugar, usamos jQuery nuevo. cuando() Método para invocar a todos ellos al mismo tiempo. Este método manejará completamente la ejecución de estas funciones y mantendrá un registro de cuándo ha regresado cada una. Encadenamos el entonces() método después de la cuando() método. Una vez que todas las funciones especificadas han regresado exitosamente, la función de devolución de llamada que pasamos a entonces() método será ejecutado.
cuando() El método crea un objeto diferido que administra las funciones que especificamos como argumentos.. entonces() son llamados. Otros manipuladores también pueden estar encadenados al cuando() objeto diferido, como fallar(), que se ejecutaría si una o más de las funciones pasadas al objeto diferido fallaran.
Funciones de utilidad
convertDate () y breakTweet (). El código para estas funciones es el siguiente:// format date convertDate = function (obj, i) // elimina la zona horaria en IE if (window.ActiveXObject) obj [i] .created_at = obj [i] .created_at.replace (/ [+] \ d 4 /, ""); // fecha bonita en el locale del sistema var días = ["Sol", "Mon", "Mar", "Mié", "Jue", "Viernes", "Sábado"], fecha = nueva Fecha (obj [i] .created_at), formattedTimeStampArray = [days [obj [i] .created_at], date.toLocaleDateString (), date.toLocaleTimeString ()]; devolver formattedTimeStampArray.join (""); // format text breakTweet = function (obj, i) // atify var text = obj [i] .text, brokenTweet = [], atExpr = / (@ [\ w] +) /; if (text.match (atExpr)) var splitTweet = text.split (atExpr); para (var x = 0, y = splitTweet.length; x < y; x++) var tmpObj = ; if (splitTweet[x].indexOf("@") != -1) tmpObj["Name"] = splitTweet[x]; else tmpObj["Text"] = splitTweet[x]; brokenTweet.push(tmpObj); else var tmpObj = ; tmpObj["Text"] = text; brokenTweet.push(tmpObj); return brokenTweet; convertDate () La función es relativamente sencilla: primero verificamos si el navegador en uso es una variante de IE buscando window.ActiveXObject. Si se encuentra esto, usamos el JavaScript reemplazar() método para eliminar el Desplazamiento de zona horaria suministrado como parte de la cadena contenida en el Creado en Propiedad del objeto JSON devuelto por Twitter. Este método toma el patrón de expresión regular para buscar, y una cadena vacía para reemplazarlo. Esto detiene IE se ahoga en el + carácter cuando la cadena se pasa a la nueva fecha constructor.nueva fecha () constructor, y pasar la cadena de fecha almacenada en el Creado en Propiedad del objeto que pasamos a la función..breakTweet () La función es un poco más compleja. Lo que debemos hacer es convertir el texto sin formato en una matriz JSON donde cada elemento de la matriz es un objeto que contiene una Nombre o Texto para que podamos usar los datos con una plantilla (más información sobre las plantillas a continuación). Primero almacenamos el texto del objeto devuelto por Twitter (que pasamos a la función). También creamos una matriz vacía para almacenar los objetos y definir la expresión regular que coincidirá @usernames.@ símbolo; si lo hace, sabemos que es un nombre de usuario y, por lo tanto, almacenarlo en un objeto con la clave Nombre. Si no contiene el @ símbolo lo guardamos con la llave Texto. El objeto es empujado dentro de la matriz. Además, si el texto completo no contiene una @ Personaje lo almacenamos con la llave. Texto.BrokenTweet matriz a la línea de tiempo del usuario Función de éxito y se almacena en el objeto JSON principal para usar con nuestras plantillas. Además de calificar el texto, también podríamos vincular y hashificar si quisiéramos. Te lo dejo a ti para que lo implementes.
Plantillas
entonces() Método en la última sección del código, hubo un comentario y nada más. Directamente después de este comentario, agregue el siguiente código:// aplicar plantillas tweetbox.find ("# tweetTemplate"). tmpl (tweetData) .appendTo ("# tweetList"); tweetbox.find ("# ffTemplate"). tmpl (friendData) .appendTo ("# friendList"); tweetbox.find ("# ffTemplate"). tmpl (followData) .appendTo ("# followList"); // muestra los tweets tweetbox.find ("# tweets"). show (); tmpl (). El método acepta el JSON que contiene los datos que utilizará la plantilla. Luego especificamos dónde en el documento para insertar los elementos de la plantilla. Cada conjunto de plantillas agrega los elementos al contenedor vacío correspondiente dentro del widget. los tmpl () Se llama al método en tres elementos, pero estos elementos aún no existen. Agregaremos estas siguientes.
Añadiendo las plantillas de jQuery
$ datos formato de elemento de plantilla.
Terminando
#feed ul padding: 0; margen: 0; #feed li padding: 0; borde inferior: 1px sólido #aaa; tipo de estilo de lista: ninguno; tamaño de fuente: 11px; #feed li: último hijo, #feed li: last-child p border-bottom: none; #feed p padding: 10px; margen: 0; borde inferior: 1px sólido #eee; imagen de fondo: -webkit-gradient (lineal, izquierda inferior, superior izquierda, stop de color (0.48, # c2c2c2), stop de color (0.71, # d6d6d6)); imagen de fondo: -moz-lineal-gradiente (centro inferior, # c2c2c2 48%, # d6d6d6 71%); #feed p: after content: ""; bloqueo de pantalla; ancho: 100%; altura: 0; Limpia los dos; .tweet-link display: block; margen superior: 5px; color: # 777; .img-link display: block; margen: 4px 10px 0 0; flotador izquierdo; #feed .username a font-size: 14px; font-weight: negrita; #feed .bio display: block; margen superior: 10px;
división() Método de expresión regular. Para solucionar este problema, podemos usar un excelente parche de JavaScript creado por Steven Levithan. Se puede descargar desde: http://blog.stevenlevithan.com/archives/cross-browser-split y se puede incluir en la página mediante un comentario condicional de la misma manera que agregamos el html5shiv expediente:tweetbox.js expediente.
Resumen
cada y condicionales con Si y más.
.js archivar y volver a la .html expediente. >PScuando() El método proporcionado en jQuery 1.5, que nos permite administrar un conjunto de solicitudes asíncronas y ejecutar el código una vez que se han completado. Esto implica usar el entonces() método para especificar una función que se ejecutará una vez que se hayan devuelto todas las funciones asíncronas.
