Share
Si no has escuchado, hay un chico nuevo en la ciudad: CanJS. ¿Qué mejor manera de sumergirse en lo que ofrece este nuevo marco que crear una aplicación de administrador de contactos? Cuando haya terminado con esta serie de tres partes, tendrá todas las herramientas que necesita para crear sus propias aplicaciones de JavaScript.!
Crear una aplicación de JavaScript sin las herramientas adecuadas es difícil. Si bien jQuery es excelente en lo que hace, una biblioteca de manipulación de DOM no proporciona ninguna infraestructura para crear aplicaciones. Esto es específicamente por qué necesitas usar una biblioteca, como CanJS.
CanJS es una biblioteca ligera de MVC que le brinda las herramientas que necesita para crear aplicaciones JavaScript.
CanJS es una biblioteca ligera de MVC que le brinda las herramientas que necesita para crear aplicaciones de JavaScript. Proporciona toda la estructura del patrón MVC (Modelo-Vista-Control), plantillas con enlace en vivo, soporte de enrutamiento y es segura para la memoria. Es compatible con jQuery, Zepto, Mootools, YUI, Dojo y tiene un amplio conjunto de extensiones y complementos..
En la primera parte, usted:
¿Emocionado? ¡Usted debería ser! Ahora vamos a programar.
Tendrá que crear una carpeta para su aplicación. Dentro de esta carpeta, necesitas cuatro subcarpetas: css, js, puntos de vista y img. La estructura de su carpeta debería verse así cuando haya terminado:
Guardar esto como index.html:
CanJS Contacts Manager Gerente de Contactos
En la parte inferior de la página, cargamos jQuery, CanJS, el complemento del dispositivo y el código de su aplicación (contactos.js).
El CSS y las imágenes para este tutorial están incluidos en los archivos de origen, que se pueden descargar arriba.
Las vistas son plantillas del lado del cliente que se utilizan para representar partes de su aplicación. CanJS admite varios lenguajes de plantillas, pero este tutorial utilizará EJS (JavaScript incorporado), que se empaqueta con CanJS y admite el enlace en vivo.
Las plantillas de EJS se ven como HTML pero con etiquetas mágicas donde desea un comportamiento dinámico (con JavaScript). Hay tres tipos de etiquetas mágicas en EJS:
Accentsconagua
Las plantillas se pueden cargar desde un archivo o etiqueta de script. En este tutorial se cargarán plantillas desde archivos EJS..
Para representar contactos, necesitarás una plantilla EJS. Guarde el siguiente código como contactosLista.ejs dentro de su carpeta de vistas:
contactLists.ejs Hará una lista de contactos. Examinemos el código de la plantilla aquí con más detalle:
<% list(contacts, function(contact) %>
El EJS lista() el ayudante invoca una función de devolución de llamada en cada contacto de la lista. Cuando se usa con una lista observable, el lista() el ayudante utilizará el enlace en vivo para volver a ejecutar en cualquier momento que cambie la longitud de la lista.
El código anterior utiliza una devolución de llamada del elemento para agregar la instancia de contacto a los datos del . Todo después de la flecha está envuelto en una función que se ejecutará con el establecer en el elemento actual.
<%== can.view.render('views/contactView.ejs', contact: contact, categories: categories ) %> Este código hace que el contactView.ejs sub-plantilla para cada contacto. can.view.render () toma una plantilla y datos como sus parámetros y devuelve HTML.
Las sub-plantillas son una excelente manera de organizar sus vistas en partes manejables. También ayudan a simplificar sus plantillas y promueven DRY (No se repita). Más adelante en este tutorial, reutilizará esta plantilla para crear contactos. Guarde este código como contactView.ejs en su carpeta de vistas:
Cada propiedad de un contacto se coloca en un etiqueta. Se utilizarán para agregar y actualizar la información de un contacto..
En cualquier momento EJS se encuentra attr () al procesar una plantilla, sabe que el código circundante debe convertirse en un controlador de eventos vinculado a los cambios de esa propiedad. Cuando la propiedad se modifica en otra parte de la aplicación, el controlador de eventos se activa y su interfaz de usuario se actualizará. Esto se conoce como enlace vivo. El enlace de EJS Live es opcional. Solo se enciende si usas attr () para acceder a las propiedades.
Echemos un vistazo a uno de los etiquetas de la contactView.ejs Para ver cómo funciona esto:
>
El código en las etiquetas mágicas se convertirá en un controlador de eventos vinculado a la propiedad de nombre del contacto. Cuando actualizamos la propiedad de nombre, se ejecuta el controlador de eventos y se actualizará el HTML.
puede.control puede.control crea un control organizado, sin fugas de memoria y con estado que puede usarse para crear widgets u organizar la lógica de la aplicación. Crea una instancia de un Control en un elemento DOM y le pasa datos que su control necesitará. Puede definir cualquier número de funciones en su Control y enlazar a eventos.
Cuando el elemento al que está vinculado su Control se elimina del DOM, el Control se destruye a sí mismo, limpiando los controladores de eventos enlazados.
Para crear un nuevo control, extienda puede.Control () Pasándole un objeto que contiene funciones que desea definir. En la segunda parte, los manejadores de eventos se pasarán también.
Hay algunas variables y funciones importantes presentes en cada instancia de Control:
esta - Una referencia a la instancia de Controleste.elemento - El elemento DOM en el que creó la instancia enesta.opciones - Un objeto que contiene cualquier dato pasado a la instancia cuando fue creadoen eso() - Llamado cuando se crea una instanciaAgrega el siguiente fragmento a tu contactos.js Archivo para crear el Control que gestionará los contactos:
Contacts = can.Control (init: function () this.element.html (can.view ('views / contactsList.ejs', contacts: this.options.contacts, categorías: this.options.categories)) ;) Cuando una instancia de Contactos es creado, en eso() Hará dos cosas:
puedo ver() para hacer contactos. puedo ver() acepta dos parámetros: el archivo o id de la etiqueta de script que contiene nuestro código de plantilla y datos. Devuelve el resultado representado como un DocumentFragment (un contenedor ligero que puede contener elementos DOM).puedo ver() en el elemento de Control usando jQuery .html ().Un modelo abstrae la capa de datos de una aplicación. Se necesitan dos modelos en esta aplicación: uno para contactos y otro para categorías. Añadir este código a contactos.js:
Contact = can.Model (findAll: 'GET / contacts', create: "POST / contacts", actualización: "PUT / contacts / id", destroy: "DELETE / contacts / id", ); Category = can.Model (findAll: 'GET / categories', );
Un modelo tiene cinco métodos estáticos que puede definir para crear, recuperar, actualizar y eliminar datos. Son encuentra todos, Encuentra uno, crear, actualizar y destruir. Puede sobrescribir estas funciones para que funcionen con cualquier back-end, pero la forma más fácil de definir un Modelo es usar el servicio REST, como se ejemplifica en el código anterior. Puede omitir de forma segura cualquier método estático que no se utilizará en una aplicación.
Es importante señalar aquí que las instancias del modelo en CanJS son en realidad lo que llamamos "observables". puede. observar Proporciona el patrón observable para objetos y can.Observe.List Proporciona el patrón observable para matrices. Esto significa que puedes obtener y establecer propiedades usando attr () y se unen a los cambios en esas propiedades.
los encuentra todos() método devuelve un Lista de modelos, el cual es un can.Observe.List que desencadena eventos cuando un elemento se agrega o elimina de la lista.
Los accesorios interceptan las solicitudes AJAX y simulan su respuesta con un archivo o función. Esto es fantástico para pruebas, creación de prototipos o cuando un back-end no está listo todavía. Se necesitan accesorios para simular el servicio REST que usan los modelos en esta aplicación.
Pero primero, necesitará algunos datos de muestra para que los aparatos los utilicen. Agregue el siguiente código a contactos.js:
var CONTACTOS = [id: 1, nombre: 'William', dirección: '1 CanJS Way', correo electrónico: '[email protected]', teléfono: '0123456789', categoría: 'compañeros de trabajo', id : 2, nombre: 'Laura', dirección: '1 CanJS Way', correo electrónico: '[email protected]', teléfono: '0123456789', categoría: 'amigos', id: 3, nombre: 'Lee' , dirección: '1 CanJS Way', correo electrónico: '[email protected]', teléfono: '0123456789', categoría: 'familia']; var CATEGORIES = [id: 1, name: 'Family', data: 'family', id: 2, name: 'Friends', data: 'friends', id: 3, name: 'Co- trabajadores, datos: 'compañeros de trabajo'];
Ahora que tiene algunos datos, necesita conectarlo a los accesorios para poder simular un servicio REST. can.fixture () toma dos parametros La primera es la URL que queremos interceptar y la segunda es un archivo o función que se utiliza para generar una respuesta. A menudo, las URL que desea interceptar son dinámicas y siguen un patrón. En este caso, debe utilizar URL con plantilla. Simplemente agregue llaves a la URL donde desea hacer coincidir comodines.
Agregue lo siguiente a contactos.js:
can.fixture ('GET / contacts', function () return [CONTACTS];); ID de var = 4; can.fixture ("POST / contacts", function () return id: (id ++)); can.fixture ("PUT / contacts / id", function () return ;); can.fixture ("DELETE / contacts / id", function () return ;); can.fixture ('GET / categories', function () return [CATEGORIES];); Los primeros cuatro accesorios simulan el OBTENER, ENVIAR, PONER y BORRAR respuestas para el Contacto modelo, y el quinto accesorio simula el OBTENER respuesta para el Categoría modelo.
Su aplicación tiene Modelos para sus datos, Vistas para representar contactos y un Control para conectar todo. Ahora necesitas arrancar la aplicación.!
Agrega esto a tu contactos.js expediente:
$ (document) .ready (function () $ .when (Category.findAll (), Contact.findAll ()). then (function (categoryResponse, contactResponse) var categories = categoryResponse [0], contacts = contactResponse [0 ]; nuevos contactos ('# contactos', contactos: contactos, categorías: categorías););); Echemos un vistazo más de cerca a lo que está sucediendo en este código:
$ (documento) .ready (función ()
Espere a que el DOM esté listo con la función de preparación de documentos de jQuery.
$ .when (Category.findAll (), Contact.findAll ()). then (function (categoryResponse, contactResponse)
Llamada encuentra todos() en ambos modelos para recuperar todos los contactos y categorías. Ya que encuentra todos() devuelve un Aplazado, $ .cuando () se utiliza para realizar ambas solicitudes en paralelo y ejecutar una devolución de llamada cuando finalizan.
var categories = categoryResponse [0], contacts = contactResponse [0];
Obtenga la lista de instancias del modelo de la respuesta de los dos encuentra todos() llamadas Las respuestas son matrices, y el primer índice es la lista de instancias del modelo recuperadas.
Contactos nuevos ('# contactos', contactos: contactos, categorías: categorías); Crear una instancia de la Contacto Control sobre el #contactos elemento. La lista de contactos y categorías se pasan al Control..
Cuando ejecute su aplicación en un navegador, debería ver una lista de contactos:
Eso lo hace por la primera parte de esta serie! Has sido introducido en el núcleo de CanJS:
En la próxima lección, creará una Controlar y Ver para mostrar categorías y utilizar enrutamiento para filtrar contactos. Espero verte allí!
Preguntas? Pregunta lejos! ¿No puedo esperar para aprender más? La segunda parte de la serie ha sido publicada aquí.!
