Esta semana, el equipo de jQuery anunció que el complemento de plantillas de Microsoft (junto con un par de otros) ahora está siendo oficialmente compatible. Lo que esto significa es que ahora el equipo central mantendrá y actualizará el complemento directamente. En este video tutorial, revisaremos lo esencial del complemento y por qué es tan increíble.

---

Como ejemplo rápido, volveremos a consultar el ejemplo de la API de búsqueda de Twitter del viernes (piense en Bieber). La única diferencia es que, esta vez, usaremos una plantilla HTML para adjuntar los datos devueltos, en lugar de confundir nuestro JavaScript!

Hace unos meses, Andrew Burgess le presentó este complemento, aún en versión beta. Sin embargo, hoy, integraremos el complemento en el código real.

Suscríbete a nuestra página de YouTube para ver todos los videos tutoriales.!

---

Curso acelerado

---

Paso 1: Importar jQuery y el complemento de plantillas

---

Paso 2: Crea tu plantilla

• Observe cómo esta plantilla se ajusta dentro de guión etiquetas, y que un tipo de texto / x-jquery-tmpl ha sido aplicado.
• Hacemos referencia a los nombres de las variables de la plantilla anteponiendo un signo de dólar y envolviendo el nombre de la propiedad entre llaves..
• Si las declaraciones se pueden crear utilizando dos conjuntos de llaves, como se demostró anteriormente. (Ver screencast para más detalles.)

---

Paso 3: Encuentra algunos datos para renderizar!

En este caso, haremos una búsqueda rápida de la API de búsqueda de Twitter..

Gracias a Peter Galiba (ver comentarios), por recomendar los más elegantes. $ .map solución, mostrada arriba.

Consulte el screencast para un recorrido completo del código anterior. Sin embargo, lo más importante es que estamos creando una matriz de objetos. Esto servirá como los datos para la plantilla que creamos en el paso dos. Observe cómo los nombres de propiedad:

 nombre de usuario: obj.from_user, tweet: obj.text, imgSource: obj.profile_image_url, geo: obj.geo

... corresponden a las variables de plantilla que creamos en el paso dos.

---

Paso 4: ¿Dónde debe hacerse el marcado??

A continuación, debemos designar dónde El marcado y los datos deben ser renderizados. Crearemos una lista desordenada para este propósito..

---

Paso 5: Renderizar los datos

Finalmente, adjuntamos los datos a la plantilla y los agregamos a la lista desordenada (#tweets) que creamos en el paso cuatro.

 $ ('# # tweets'). tmpl (twitter) .appendTo ('# twitter');

1. Encuentra el guión elemento (plantilla) con un carné de identidad de tweets.
2. Adjunta gorjeo matriz a esta plantilla.
3. Agregar el nuevo marcado al DOM.

---

Fuente final

           
 Tweets sobre Nettuts+ 
  
   

---

Entonces, qué piensas?

Ahora que el plugin de plantillas está oficialmente respaldado por el equipo central de jQuery, ¿lo utilizará en sus proyectos futuros??